Animated Color Selector
用移动选择轮廓与原生单选行为选择命名色块。
适用场景
- 当界面需要以下行为时使用 Animated Color Selector：用移动选择轮廓与原生单选行为选择命名色块。
安装
选择安装方式，用法示例将同步更新导入路径。
$ bunx --bun shadcn-vue@2.8.2 add https://orvui.efu.me/r/color-selector.json
首次使用时，将安装的 src/components/orvui/styles.css 导入项目样式入口。
示例
预览
packages/vue/src/motion/color-selector/demo.vue
<script setup lang="ts">
import { ColorSelector, ColorSelectorItem, ColorSelectorLabel, ColorSelectorList } from "@/components/orvui/motion/color-selector";
const swatches = [
{ value: "blue", color: "#3478f6", label: "Blue" }, { value: "purple", color: "#9270e8", label: "Purple" },
{ value: "pink", color: "#e66aa4", label: "Pink" }, { value: "red", color: "#e55656", label: "Red" },
{ value: "orange", color: "#ed9141", label: "Orange" }, { value: "amber", color: "#e5b63c", label: "Amber" },
{ value: "green", color: "#65a65a", label: "Green" }, { value: "teal", color: "#169d83", label: "Teal" },
];
</script>
<template>
<ColorSelector default-value="blue" name="accent"><ColorSelectorLabel>Accent</ColorSelectorLabel><ColorSelectorList>
<ColorSelectorItem v-for="swatch in swatches" :key="swatch.value" v-bind="swatch" />
</ColorSelectorList></ColorSelector>
</template>
packages/vue/src/motion/color-selector/src/ColorSelector.vue
状态与事件
需要由表单、路由或父组件管理时，绑定下列状态并接收对应更新。v-model 是属性与 update 事件的简写；值的类型应与 API 一致。
| 组件 | Vue 绑定 | 更新事件 |
|---|---|---|
ColorSelector | v-modelstring | update:modelValue |
可选受控属性未传入时，按组件文档的默认行为工作；不要用固定的 false 或空值代替未传入。异步请求和持久化在应用中处理，再把结果传回组件。
API 参考
ColorSelector
modelValue?string—defaultValue?string""name?stringinstanceIdform?string—disabled?booleanfalserequired?booleanfalse事件
update:modelValue—@update:modelValuechange—@change插槽
default() => VNodeChild#defaultColorSelectorItem
valuestring—colorstring—labelstring—disabled?booleanfalseColorSelectorLabel
插槽
default() => any#defaultColorSelectorList
插槽
default() => any#default无障碍
为交互控件提供明确的无障碍名称。保留文档中的键盘路径、可见焦点与减少动态效果状态；自定义插槽应继续保留所替代部件的语义。
常见问题
- 如何配置 Animated Color Selector？
- 通过 modelValue、defaultValue、name、form、disabled、required 配置 Animated Color Selector；API 表列出其类型与默认值。
- 如何连接到应用状态？
- 监听 update:modelValue、change，将组件连接到应用状态。
- 可以在服务端渲染吗？
- 可以在 Vue SSR 应用中正常渲染。服务端与客户端的初始 props 应保持一致；浏览器测量与交互资源在挂载后启动。
更新于
来源与许可 ↗MIT · 0.1.1