组件库

vue3 + vite + ts 颜色选择器,支持颜色吸取,透明度，与浏览器原生颜色选择器相似,与饿了么颜色选择器相似

示例

环境

• node
• eslint
• Vue 3
• TypeScript
• Vite

使用方式

# 安装
npm i ciw-color-picker-vue

# 全局引入方式 main.ts 或 main.js
import 'ciw-color-picker-vue/dist/style.css'
import xxxx from 'ciw-color-picker-vue'
app.use(xxxx)

# 单组件引入方式 css 参照全局引入
举例: 颜色选择器

import { ciwColorPicker } from 'ciw-color-picker-vue'
app.use(ciwColorPicker)

组件 具体引入根据需求自行调整，只展示全局引入方式

ciwColorPicker 颜色选择器:

使用方式

    <ciw-Color-Picker v-model="color"></ciw-Color-Picker>

公共参数

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | :----: | :----------------: | :------------------------: | :------: | :-----: | | value | 初始颜色值 | string | rbg | hsl | false | #fff | | theme | 主题 | dark | light | false | dark | | height | 颜色选择器区域高度 | number | false | 150 | | width | 颜色选择器区域宽度 | number | false | 233 | | colors | 预选颜色列表 | [string] | false | [] | | btn | 是否显示按钮按钮 | boolean | false | false | | zIndex | 菜单层级 | number | false | 2 |

组件参数

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | :---: | :------: | :------------------------------------------: | :------: | :---------: | | size | 组件大小 | undefined | medium | small | mini | false | undefined |

指令、方法参数

| 属性 | 描述 | 类型 | 是否必填 | 默认值 | | :----: | :----------------------: | :--------: | :------: | :----: | | change | 颜色值发生改变时触发事件 | Function | false | none |