ant-design-vue 的颜色选择器

因为业务需要用到颜色选择器，但ant-design-vue里没这个组件，所以在网上找到了一个封装好的。这是组件的仓库地址 https://gitee.com/ghkeeping/ant-color-picker?_from=gitee_search

vue3+typeScript基于ant-design-vue2.xx版本封装的颜色选择器

效果

 

参数	说明	类型	可选值	默认值
value/v-model	绑定值	string	—	—
size	尺寸	string	large/default/small	default
show-alpha	是否支持透明度选择	boolean	—	false
color-format	写入v-model的颜色格式	string	hsl/hsv/hex/rgb	hex（show-alpha 为 false）/ rgb（show-alpha 为 true）
predefine	预定义颜色	array	—	—
placement	颜色选择器弹出位置	string	top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	top

 Events

事件名称	说明	回调参数
change	当绑定值变化时触发	当前值
active-change	面板中当前显示的颜色发生改变时触发	当前显示的颜色值

引入封装好的组件

import { colorPicker } from '/@/components/ColorPicker';

使用

<colorPicker v-model="configure.FontColor" @change="selectColorPicker" />