{"repo":"zuley/vue-color-picker","free":true,"listed":false,"github":"https://github.com/zuley/vue-color-picker","clone":"git clone https://github.com/zuley/vue-color-picker.git","description":"Vue 颜色选择器插件","language":"Vue","stars":342,"topics":["vue","vue-color-picker"],"license":"MIT","category":"ui-components","readme_excerpt":"vColorPicker 基于 Vue 3 的颜色选择器插件 DEMO 演示 安装 使用 vue3 使用 在 main.ts 文件中引入并注册 在页面中使用 多语言使用示例 vue2 使用 在 main.js 文件中引入插件并注册 在项目中使用 vcolorpicker 特点 1. 简单易用，支持 v-model ，UI 增加了圆角和过渡动画 2. 提供以 npm 的形式安装提供全局组件 3. 在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能 4. 完整的键盘 / 屏幕阅读器可访问性 ： Tab 聚焦、 Enter / Space 激活、 Esc 关闭，所有色块都带 aria-label 5. SSR 友好 ：服务端渲染输出确定性 fallback，客户端挂载后再做语言检测，无 hydration mismatch 6. CSS Variables 主题化 ：无需选择器穿透就能定制配色和尺寸 Props 属性 类型 默认值 说明 --- --- --- --- v-model / modelValue string — 当前颜色值 defaultColor string #000000 「默认颜色」按钮重置使用的颜色 disabled boolean false 禁用状态 locale 'zh-CN' \\ 'en-US' \\ 'ja-JP' 自动检测 面板内置文案语言；不传时跟随 / navigator.language messages Partial — 自定义文案对象，覆盖 defaultColor / themeColors / standardColors / moreColors placement ColorPickerPlacement 'auto' 面板位置： 'auto' / 'top' / 'bottom' / 'top-start' / 'top-end' / 'bottom-start' / 'bottom-end' 。 'auto' 根据视口剩余空间自动决定；带方向时锁定对应轴 teleport boolean \\ string false 把面板渲染到 body （ true ）或 CSS 选择器指定的容器，避免被祖先 overflow: hidden 裁剪 事件 事件名 参数 说明 --- --- --- change (color: string) 颜色值改变时触发 update:modelValue (color: string) v-model 同步事件 open — 面板打开时触发 close — 面板关闭时触发（点击外部 / Esc / 选色后自动关闭） hover (color: string) 鼠标移到色块时触发；离开时携带空字符串 命令式 API 通过模板 ref 暴露的方法可命令式控制组件： 方法 说明 --- --- open() 打开面板（ disabled 时无效） close() 关闭面板 focus() 把焦点移回触发按钮 可访问性（a11y） - 触发按钮可通过 Tab 聚焦； Enter / Space 激活；触发按钮聚焦时按 ↑ / ↓ 打开面板并聚焦第一个色块 - 色块网格采用漫游焦点（roving tabindex）： Tab 一次进入网格，之后用 ← → ↑ ↓ 在色块间移动， Home / End 跳到行首 / 行尾， Enter / Space 选中 - 面板打开后按 Esc 关闭并把焦点送回触发按钮 - 触发按钮带 role=","default_branch":null,"files":null,"tree":[],"storefront":"/r/zuley","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/zuley/vue-color-picker/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}