前端颜色选择器

Posted 2021-05-07 wgs-blog

颜色选择器

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

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