前端颜色选择器

颜色选择器

随着需求的增加，我们会发现自己的知识越来越不够用，前两天看了一个有意思的需求，界面颜色可以让用户自己选择，自己搜了好久，虽然插件很多，但是麻烦程度也是不低，最终找到了一个简单的插件，分享给大家，少走弯路：

vColorPicker

此插件是仿照Angular的color-picker插件制作

特点

1. 简单易用，UI在原插件基础上优化增加了圆角和过渡动画
2. 提供以 npm 的形式安装提供全局组件
3. 在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能。

安装

$ npm install vcolorpicker -S

使用

　　在 `main.js` 文件中引入插件并注册

　　import vcolorpicker from 'vcolorpicker' 　　Vue.use(vcolorpicker) 

　　在项目中使用 vcolorpicker

<template> <colorPicker v-model="color" /> </template> <script> export default { data () { return { color: '#ff0000' } } } </script>

事件

change颜色值改变的时候触发

<colorPicker v-model="color" v-on:change="headleChangeColor"></colorPicker>

以上就是vcolorpicker的基本内容，使用非常的简单，欢迎点赞！！！