Vue 3 颜色拾取器
Vue 3 的色彩选择组件 。 快速且有小包大小. 渐入一体! 无依无靠! 完全定制!
带有2.0版本的特性
- 立即改变模式的能力
- 更改颜色列表中的值
- 删除颜色列表中的值
- 新样式变量
- 新设计
不要忘记明星的动机:
试试吧 现场直播
下载1.1.9继续旧版本!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
安装
国家防范机制安装
npm i @cyhnkckali/vue3-color-picker
Yarn 安装
yarn add @cyhnkckali/vue3-color-picker
导入
导入要使用的地方
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
将样式文件导入您的主机 。 js 文件
import '@cyhnkckali/vue3-color-picker/dist/style.css'
使用/实例
<script setup>
import {Vue3ColorPicker} from '@cyhnkckali/vue3-color-picker';
</script>
<template>
<Vue3ColorPicker v-model="value" mode="solid" :showColorList="false" :showEyeDrop="false" type="RGBA"/>
<Vue3ColorPicker v-model="value" mode="gradient" :showColorList="false" :showEyeDrop="false"/>
</template>
选项
| 参数 | 类型 | 说明 |
|---|---|---|
v-model | string | 默认 '' |
mode | string | solid 或者说 gradient 默认 gradient |
theme | string | light 或者说 dark 默认 light |
type | string | 返回颜色值类型 HEX8 RGBA RGB HEX 默认 HEX8 |
inputType | string | 颜色值输入类型 RGB HSL HSV CMYK 默认 RGB |
disabled | boolean | 默认 false |
local | object | 默认 { angle: '', positionX: '', positionY: '', solid: '', gradient: '', linear: '', radial: '', colorPalette: '', btnSaveLabel:'Save', btnCancelLabel:'Cancel' } |
colorListCount | number | 确定颜色列表默认值中要保留多少颜色 18 |
showColorList | boolean | 默认 true |
showEyeDrop | boolean | 默认 true 只支持 Chrome 和边缘 |
showAlpha | boolean | 默认 true |
showInputMenu | boolean | 默认 true |
showInputSet | boolean | 默认 true |
showPickerMode | boolean | 默认 true |
iconClasses | object | 默认 { ruler: '', eyeDroper: '', arrowDown: '', save: '', delete: '' } |
gradientMode | linear 或者说 radial | 默认 linear 设定拾取器启动时的初始梯度模式 |
showButtons | boolean | 默认 true |
输出
| 参数 | 类型 | 说明 |
|---|---|---|
update:model-value | event | 返回时 'color value' |
onSave | event | 返回时 'color value' |
onCancel | event | 返回时 'color value' |
CSS 颜色变量
| 变量名称 | 十六进制 | 暗黑十六进制 |
|---|---|---|
| --cp-小学 | ||
| -- cp 集装箱 -- bg | ||
| --cp - 选择颜色 | ||
| -- cp- 远程边界 | ||
| -- cp- rang- 阴影 | ||
| --cp-容器-阴影 | ||
| --cp-gray-100 (英语) | ||
| --cp-gray-200 (英语) | ||
| --cp-gray-300 (英语) | ||
| --cp-gray-400 (英语) | ||
| --cp-gray-500 (英语) | ||
| --cp-gray-600 (英语) | ||
| --cp-gray-700 (英语) | ||
| --cp-gray-800 (英语) | ||
| --cp-gray-900 (英语) | ||
| -- cp- 反向黑暗 | ||
| --cp-反向-白色 |
路线图
- 要添加的部件类型