vue中使用顏色拾取器

1.vcolorpicker使用方法
官方地址：http://vue-color-picker.rxshc.com/
圖例：

 

 

 

/* main.js */
// 顏色選擇器

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

<!--system.vue-->

<template>
　　<colorPicker v-model="color" @change="handleChangeColor"></colorPicker>
</template>

<script>
export default {
　　name: 'system',
　　data () {
　　　　return {
　　　　　　color: #000;
　　　　}
　　},
　　methods:{
　　handleChangeColor (val) {
　　console.log('輸出顏色值',val) // 顏色 #6c8198
　　},
}
</script>

 

2.vue-color使用方法
安裝地址：https://www.npmjs.com/package/vue-color

功能介紹：
點擊左邊顏色塊，可打開關閉顏色選擇器

<!-- system.vue-->

<template>
　　<section>
　　　　<div class="color_con" :style="{background:color}" @click="handleShowColor"></div>
　　　　　　<div v-show="colorShow">
　　　　　　<sketch-picker v-model="tableData.color" @input="updateValue"></sketch-picker>
　　　　</div>
　　</section>
</template>


<script>
import { Sketch } from 'vue-color'
export default {
　　name: 'system',
　　components: {
　　'sketch-picker': Sketch
　　},
　　data () {
　　return {
　　color: #000;
　　// 顏色選擇器
　　colorShow: false,
　　colors: {
　　　　hex: '#194d33',
　　　　hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
　　　　hsv: { h: 150, s: 0.66, v: 0.30, a: 1 },
　　　　rgba: { r: 25, g: 77, b: 51, a: 1 },
　　　　a: 1
　　　　}
　　}
},

methods:{
　　// 顏色選擇器
　　handleShowColor () {
　　　　if (this.colorShow) {
　　　　　　this.colorShow = false
　　　　} else {
　　　　　　this.colorShow = true
　　　　}
　　},
　　updateValue (val) {
　　　　console.log('顏色選擇', val)
　　　　this.color = val.hex
　　},
}
</script>

版權聲明：本文為CSDN博主「涼紅茶」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_40682842/article/details/90693693