View Shadcn UI

Appearance

介绍 ​


本文档主要用于描述 ShadcnSelect 组件的一些特性和用法。

用法 ​

查看代码
vue
<template>
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions"  :dark="darkMode" />
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)


const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt' },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

禁用 (disabled) ​

查看代码
vue
<template>
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" disabled  :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt', disabled: true },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

尺寸 (size) ​

查看代码
vue
<template>
    <p>Select Value: {{ defaultSelect }}</p>
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="small"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="default"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="large"  :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt', disabled: true },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

类型 (type) ​

查看代码
vue
<template>
    <p>Select Value: {{ defaultSelect }}</p>
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="primary"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="success"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="warning"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="error"  :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt', disabled: true },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

边框 (border) ​

查看代码
vue
<template>
    <p>Select Value: {{ defaultSelect }}</p>
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions"  :dark="darkMode" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :border="false"  :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt', disabled: true },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

组 (group) ​

查看代码
vue
<template>
    <ShadcnSelect v-model="defaultSelect" :dark="darkMode">
      <template #options>
        <ShadcnSelectGroup label="Group 1" :dark="darkMode">
          <ShadcnSelectOption v-for="i in 2"
            :key="i"
            :label="`Option ${i}`"
            :value="`Value ${i}`" :dark="darkMode" />
        </ShadcnSelectGroup>
        <ShadcnSelectOption v-for="i in 2"
                            :key="i"
                            :label="`Option ${i}`"
                            :value="`Value ${i}`" :dark="darkMode" />
      </template>    
    </ShadcnSelect>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
</script>

多选 (multiple) ​

查看代码
vue
<template>
    <ShadcnSelect v-model="defaultSelect" multiple :options="defaultSelectOptions"  :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue';

const defaultSelect = ref('')
const defaultSelectOptions = [
    { label: 'Vue', value: 'Vue' },
    { label: 'Nuxt', value: 'Nuxt', disabled: true },
    { label: 'Svelte', value: 'Svelte' }
]
</script>

加载 (loading) ​

查看代码
vue
<template>
  <div class="space-y-4">
    <div>
      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">普通搜索</p>
      <ShadcnSelect v-model="searchSelectValue" :options="citiesOptions" search placeholder="请搜索城市" :dark="darkMode" />
    </div>
    <div>
      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选搜索</p>
      <ShadcnSelect v-model="searchMultiValue" :options="citiesOptions" search multiple placeholder="请搜索并选择多个城市" :dark="darkMode" />
    </div>
    <div>
      <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">液态玻璃搜索</p>
      <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-blue-900 to-indigo-900' : 'bg-gradient-to-r from-blue-400 to-indigo-400']">
        <ShadcnSelect v-model="searchGlassValue" :options="citiesOptions" search glass placeholder="请搜索城市" :dark="darkMode" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useData } from 'vitepress'
import { computed, ref } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

const searchSelectValue = ref('')
const searchMultiValue = ref([])
const searchGlassValue = ref('')

const citiesOptions = [
  { value: 'beijing', label: '北京' },
  { value: 'shanghai', label: '上海' },
  { value: 'guangzhou', label: '广州' },
  { value: 'shenzhen', label: '深圳' },
  { value: 'hangzhou', label: '杭州' },
  { value: 'nanjing', label: '南京' },
  { value: 'chengdu', label: '成都' },
  { value: 'chongqing', label: '重庆' },
  { value: 'wuhan', label: '武汉' },
  { value: 'xian', label: '西安' }
]
</script>

液态玻璃效果 (glass) ​

查看代码
vue
<template>
  <div class="space-y-6">
    <div :class="['p-6 rounded-lg', darkMode ? 'bg-gradient-to-r from-green-900 to-teal-900' : 'bg-gradient-to-r from-green-400 to-teal-400']">
      <div class="flex flex-col gap-4">
        <div>
          <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">单选模式</p>
          <ShadcnSelect v-model="glassSelectValue" :options="defaultSelectOptions" glass :dark="darkMode" placeholder="请选择选项"/>
        </div>
        <div>
          <p :class="['text-sm mb-2', darkMode ? 'text-gray-200' : 'text-gray-700']">多选模式</p>
          <ShadcnSelect v-model="glassMultiValue" :options="defaultSelectOptions" glass :dark="darkMode" multiple placeholder="请选择多个选项"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useData } from 'vitepress'
import { computed } from 'vue'

const { isDark } = useData()
const darkMode = computed(() => isDark.value)

const glassSelectValue = ref(null)
const glassMultiValue = ref([])
const defaultSelectOptions = [
  { value: '1', label: '选项 1' },
  { value: '2', label: '选项 2' },
  { value: '3', label: '选项 3' },
  { value: '4', label: '选项 4' },
  { value: '5', label: '选项 5' }
]
</script>

懒加载 (lazy) ​

查看代码
vue
<template>
  <ShadcnSelect v-model="selectedValue"
                lazy
                :options="options"
                :load-data="loadMoreData"
                @update:options="handleOptionsUpdate" :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectedValue = ref()
const options = ref<any[]>([])
let page = 1

const generateChildNodes = () => {
  return Array.from({ length: 10 }, (_, index) => ({
    value: `value-${ page }-${ index }`,
    label: `Option ${ page }-${ index }`,
    disabled: false,
    type: 'primary'
  }))
}

const handleOptionsUpdate = (newOptions: SelectOptionProps[]) => {
  options.value = newOptions
}

const loadMoreData = (callback: (children: any[]) => void) => {
  setTimeout(() => {
    console.log('Loading page:', page)
    const children = generateChildNodes()
    callback(children)
    page++
  }, 1000)
}

loadMoreData((children) => {
  options.value = children
})
</script>
查看代码
vue
<template>
  <ShadcnSelect v-model="selectedValue"
                v-model:options="options"
                lazy
                :options="options"
                :load-data="loadMoreData" :dark="darkMode" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const selectedValue = ref()
const options = ref<any[]>([])
let page = 1

const generateChildNodes = () => {
  return Array.from({ length: 10 }, (_, index) => ({
    value: `value-${ page }-${ index }`,
    label: `Option ${ page }-${ index }`,
    disabled: false,
    type: 'primary'
  }))
}

const loadMoreData = (callback: (children: any[]) => void) => {
  setTimeout(() => {
    console.log('Loading page:', page)
    const children = generateChildNodes()
    callback(children)
    page++
  }, 1000)
}

loadMoreData((children) => {
  options.value = children
})
</script>

选择器 (Select) 属性 ​

选择器选项 (Select Option) 属性 ​

选择器分组 (Select Group) 属性 ​

选择器 (Select) 插槽 ​

选择器 (Select) 事件 ​