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" />

ant-design-vue 的颜色选择器相关推荐

ant design vue的ApiSelect选择器使用注意点
当使用的是ant design vue的ApiSelect时要注意,component这边要引用'ApiSelect',然后要链接后端接口,如下图中的'api:StaffApi.getList',重点 ...
ant design vue table 高度自适应_Vue组件库大评测 Element, iView, HeyUI, Ant Design Vue
今天偶然的机会想了解下其他Vue相关的组件库,网上刚好有文章,顺便自己做一下笔记,算是资源整理吧 .好了,话不多说,直接开始: 组件库的选择对于前端开发有者至关重要的影响,而组件的丰富性以及健壮性是我 ...
2019年 Vue 组件库大评测 Element, iView, HeyUI, Ant Design Vue
2018年我写的Vue组件库对比文档: https://juejin.im/post/5a9628415188257a7b5ac678 一年的时间,每一个组件库都有了更多的发展,Ant Design ...
Ant Design Vue日期选择器，禁止选择当前之前的时间
a-date-picker时间选择器 Ant Desugn Vue的时间选择器,也遇到了一些问题,就想记录一下,自认为水平不是很高,欢迎批评指正 //标签 <a-date-picker:show ...
vue颜色选择器_如何制作？ Vue的颜色选择器！
vue颜色选择器 by ZAYDEK 由ZAYDEK 如何制作? Vue的颜色选择器! (How to make a ? color picker with Vue!) 注意:颜色看起来可能比实际颜色 ...
ant design vue table表格组件实现隔行变色
ant design vue table表格组件实现隔行变色一.使用方法 html代码: <a-table:columns="patient":data-source=&q ...
vue3 antd table表格样式修改——ant design vue table表格的行高调整
vue3 antd项目实战--修改ant design vue table组件的默认样式(调整每行行高) 知识调用场景复现实际操作解决a-table表格padding过宽知识调用文章中可能会 ...
Ant Design Vue select下拉列表设置默认值
在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部代码如下: 1 <a-select v-model="que ...
iviewui php,Vue UI框架对比：Element UI、Ant Design Vue、iView
Element UI 文档:https://element.eleme.io/#/zh-CN/component/installation vue-element-admin预览:https://pa ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...

ant-design-vue 的颜色选择器

Events

ant-design-vue 的颜色选择器相关推荐

最新文章

热门文章