Select
从浮动列表选择选项，面板可从触发器连续展开。
适用场景
- 当界面需要以下行为时使用 Select：从浮动列表选择选项，面板可从触发器连续展开。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/select.json https://orvui.efu.me/r/select-morph.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
默认
select.vue组合触发器、当前值与选项，分离式面板根据可用空间选择展开方向。
packages/vue/src/motion/select/examples/default.vue
<script setup lang="ts">
import { ref } from "vue";
import {
Select,
SelectTrigger,
SelectValue,
SelectContent,
SelectItem,
} from "@/components/orvui/motion/select";
const selected = ref("vue");
const tools = [
{ value: "vue", label: "Vue" },
{ value: "vite", label: "Vite" },
{ value: "vue-router", label: "Vue Router" },
{ value: "pinia", label: "Pinia" },
];
</script>
<template>
<div class="w-56">
<Select v-model="selected"
><SelectTrigger
><SelectValue placeholder="Pick a Vue tool" /></SelectTrigger
><SelectContent
><SelectItem
v-for="tool in tools"
:key="tool.value"
:value="tool.value"
>{{ tool.label }}</SelectItem
></SelectContent
></Select
>
</div>
</template>
packages/vue/src/motion/select/src/Select.vue
变形
morph.vue通过共享 layoutId 的配套部件，让触发器连续生长为选项表面。
VueViteVue RouterPinia
packages/vue/src/motion/select/examples/morph.vue
<script setup lang="ts">
import { ref } from "vue";
import {
MorphSelect,
MorphSelectTrigger,
MorphSelectValue,
MorphSelectContent,
MorphSelectItem,
} from "@/components/orvui/motion/select";
const selected = ref("vue");
const tools = [
{ value: "vue", label: "Vue" },
{ value: "vite", label: "Vite" },
{ value: "vue-router", label: "Vue Router" },
{ value: "pinia", label: "Pinia" },
];
</script>
<template>
<div class="w-56">
<MorphSelect v-model="selected"
><MorphSelectTrigger
><MorphSelectValue placeholder="Pick a Vue tool" /></MorphSelectTrigger
><MorphSelectContent
><MorphSelectItem
v-for="tool in tools"
:key="tool.value"
:value="tool.value"
>{{ tool.label }}</MorphSelectItem
></MorphSelectContent
></MorphSelect
>
</div>
</template>
packages/vue/src/motion/select/src/MorphSelect.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
Select | v-modelstring | update:modelValue |
Select | v-model:openboolean | update:open |
MorphSelect | v-modelstring | update:modelValue |
MorphSelect | v-model:openboolean | update:open |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
默认
Select
modelValue?stringprops.valuevalue?string—defaultValue?string—open?booleanundefineddefaultOpen?booleanfalsedisabled?booleanfalseclassName?string—事件
update:modelValue—@update:modelValuevalueChange—@valueChangechange—@changeupdate:open—@update:openopenChange—@openChange插槽
default—作用域参数: value, open
#defaultSelectTrigger
className?string—插槽
default() => VNodeChild#defaultSelectValue
placeholder?string"Select"className?string—SelectContent
className?string—插槽
default() => VNodeChild#defaultSelectItem
valuestring—disabled?booleanfalselabel?stringelement.value?.textContent?.trim()className?string—插槽
default() => VNodeChild#default变形
MorphSelect
modelValue?stringprops.valuevalue?string—defaultValue?string—open?booleanundefineddefaultOpen?booleanfalsedisabled?booleanfalseclassName?string—事件
update:modelValue—@update:modelValuevalueChange—@valueChangechange—@changeupdate:open—@update:openopenChange—@openChange插槽
default—作用域参数: value, open
#defaultMorphSelectTrigger
className?string—插槽
default() => VNodeChild#defaultMorphSelectValue
placeholder?string—className?string—MorphSelectContent
className?string—插槽
default() => VNodeChild#defaultMorphSelectItem
valuestring—disabled?booleanfalselabel?string—className?string—插槽
default() => VNodeChild#defaultSelectItem
valuestring—disabled?booleanfalselabel?stringelement.value?.textContent?.trim()className?string—插槽
default() => VNodeChild#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Select？
- 通过 modelValue、value、defaultValue、open、defaultOpen、disabled、className 配置 Select；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:modelValue、valueChange、change、update:open、openChange，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1