前端颜色选择器

颜色选择器

随着需求的增长，咱们会发现本身的知识愈来愈不够用，前两天看了一个有意思的需求，界面颜色能够让用户本身选择，本身搜了很久，虽然插件不少，可是麻烦程度也是不低，最终找到了一个简单的插件，分享给你们，少走弯路：

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的基本内容，使用很是的简单，欢迎点赞！！！