前端顏色選擇器

顏色選擇器

隨着需求的增加，我們會發現自己的知識越來越不夠用，前兩天看了一個有意思的需求，界面顏色可以讓用戶自己選擇，自己搜了好久，雖然插件很多，但是麻煩程度也是不低，最終找到了一個簡單的插件，分享給大家，少走彎路：

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的基本內容，使用非常的簡單，歡迎點贊！！！