前端顏色選擇器

顏色選擇器

隨着需求的增長，咱們會發現本身的知識愈來愈不夠用，前兩天看了一個有意思的需求，界面顏色能夠讓用戶本身選擇，本身搜了很久，雖然插件不少，可是麻煩程度也是不低，最終找到了一個簡單的插件，分享給你們，少走彎路：

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