View Shadcn UI

Appearance

介绍 ​


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

用法 ​

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

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

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 />
</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" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="default" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" size="large" />
</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" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="success" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="warning" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" type="error" />
</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" />
    <ShadcnSelect v-model="defaultSelect" :options="defaultSelectOptions" :border="false" />
</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">
      <template #options>
        <ShadcnSelectGroup label="Group 1">
          <ShadcnSelectOption v-for="i in 2"
            :key="i"
            :label="`Option ${i}`"
            :value="`Value ${i}`"/>
        </ShadcnSelectGroup>
        <ShadcnSelectOption v-for="i in 2"
                            :key="i"
                            :label="`Option ${i}`"
                            :value="`Value ${i}`"/>
      </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" />
</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) ​

懒加载 (lazy) ​

查看代码
vue
<template>
  <ShadcnSelect v-model="selectedValue"
                lazy
                :options="options"
                :load-data="loadMoreData"
                @update:options="handleOptionsUpdate"/>
</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"/>
</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) 事件 ​