vue颜色选择器el-color-picker的安装及使用

Posted 2023-05-06

参考技术A 近段时间在写一个海报生成组件，开发过程中字体颜色需要使用一个颜色选择器，找遍了全网也没有找到一个合适的插件，别人写好的vue的颜色选择器少之又少，仅有的几个也不美观不灵活，element-ui的颜色选择器是我比较喜欢的一款，但又不想因为这一个组件而去引入整个element-ui依赖库，所以决定自己仿照element-ui做一个一样的插件。

插件地址： https://gitee.com/chenfency/el-color-picker

效果图：

插件安装:

插件使用：

Element ColorPicker 颜色选择器绑定值value / v-model差异问题

参考技术A 1）请求数据获得列表；
2）v-for循环绑定颜色选择器的value值；
3）绑定change事件，获取用户设置的颜色值。

虽然获取到了用户改变的颜色列表，存在一个问题，颜色选择器改变值后， 在屏幕上点击鼠标，颜色选择器显示的颜色变成初始颜色，具体原因不明 。

1）请求数据获得列表；
2）生成一个对象，该对象的属性用于颜色选择器的双向绑定变量；
3）绑定change事件，获取用户设置的颜色值。

颜色选择器使用v-model，未出现设置完颜色后点击空白处出现颜色取消问题。有没有人遇到同样问题，可以解释一下。