vue-color-颜色选择器插件的使用及此插件中Photoshop组件的属性

vue-color-颜色选择器插件的安装

安装命令如下

npm i @ckpack/vue-color 
// 或者
npm install vue-color -S

颜色选择器插件的使用

<template>
    <div class="change-color-box">
        <div class="change-color-select">
            <!-- <div>color-picker</div> -->
            <div class="item">
                <p>Chrome</p>
                <chrome-picker v-model="colors" />
            </div>

            <div class="item">
                <p>Sketch</p>
                <sketch-picker v-model="colors" />
            </div>

            <!-- <div class="item">
                <p>Photoshop</p>
                <photoshop-picker
                    v-model="colors"
                />
            </div> -->

            <div class="item">
                <p>Material</p>
                <material-picker v-model="colors" />
            </div>

            <div class="item">
                <p>Slider</p>
                <slider-picker v-model="colors" />
            </div>

            <div class="item">
                <p>Compact</p>
                <compact-picker v-model="colors" />
            </div>
            
            <div class="item">
                <p>Swatches</p>
                <swatches-picker v-model="colors" />
            </div>
            
            <div class="item">
                <p>Twitter</p>
                <twitter-picker v-model="colors" />
            </div>

            <div class="item">
                <p>Grayscale</p>
                <grayscale-picker v-model="colors" @input="updateValue" />
            </div>
            
        </div>
        <div class="button-element">
            <div class="item1">
                <!-- <p>Sketch</p>
                <sketch-picker v-if="show" v-model="colors" /> -->

                <p>Photoshop</p>
                <photoshop-picker
                    v-if="show"
                    v-model="colors"
                    @input="updateValue1"
                    @ok="onOk"
                    @cancel="onCancel"
                    acceptLabel="确定"
                    cancelLabel="取消"
                    currentLabel="当前"
                    newLabel="新的"
                    head="颜色选择器"
                />
            </div>
            <button class="btn" @click="clickHandler">点击</button>
        </div>
    </div>
</template>

<script>
import {
  Material,
  Compact,
  Swatches,
  Slider,
  Photoshop,
  Chrome,
  Sketch,
  Twitter,
  Grayscale,
} from "vue-color";

export default {
    data() {
        return {
            colors: {
                color: "",
                hex: "#194d33",
                hsl: { h: 150, s: 0.5, l: 0.2, a: 1 },
                hsv: { h: 150, s: 0.66, v: 0.3, a: 1 },
                rgba: { r: 25, g: 77, b: 51, a: 1 },
                a: 1,
            },
            show: false
        }
    },
    created() {
		// 监听是否点击在photoshop颜色选择器上，是则进行显示，否则不进行显示
        document.body.onclick = (event) => {
            console.log('event', event)
            console.log('className', event.target.className)
            var e = event || window.event;
            var elem = e.target;
            var targetArea = document.getElementsByClassName('vc-photoshop');
            console.log('targetArea', targetArea)
            if(targetArea.length && targetArea[0].contains(elem)){
                console.log('区域内')
                this.show = true
            }else{
                // 区域外 但点击的是显示按钮则进行显示
                if(event.target.className == 'btn') {
                    this.show = true
                }
                // 区域外点击的不是显示按钮则不进行显示
                else {
                    this.show = false
                }
            }
        }
    },
    components: {
        "material-picker": Material,
        "compact-picker": Compact,
        "swatches-picker": Swatches,
        "slider-picker": Slider,
        "photoshop-picker": Photoshop,
        "chrome-picker": Chrome,
        "sketch-picker": Sketch,
        "twitter-picker": Twitter,
        "grayscale-picker": Grayscale,
        "color-picker": ColorPicker
    },
    methods: {
        // 值改变事件
        updateValue(value) {
            console.log(value)
            console.log(this.color)
        },
        updateValue1(value) {
            console.log(111, value)
            console.log(11, this.colors)
        },
        clickHandler() {
            this.show = !this.show
        },
        onOk(event) {
            console.log('确定', event)
            this.show = false
        },
        onCancel(event) {
            console.log('取消', event)
            this.show = false
        },
    }
}
</script>

<style lang="less" scoped>
.change-color-select {
    display: flex;
    flex-wrap: wrap;

    .item {
       margin-right: 30px; 
       margin-top: 30px;
    }
}

.change-color-box {
    // position: relative;
    .item1 {
        position: absolute;
        // top: 0px;
        // left: 0px;
        top: 918px;
        left: 114px;
    }

    button {
        position: relative;
    }

    .button-element {
        margin-bottom: 100px;
    }
}
</style>

上述代码在浏览器的具体呈现

当点击按钮时会显示设置了属性的Photoshop组件，点击其他地方Photoshop组件会消失

选择颜色时this.colors的值

{
    "hsl": {
        "h": 150.0000000000001,
        "s": 0.7438311971401168,
        "l": 0.4596201750000001,
        "a": 1
    },
    "hex": "#1ECC75",
    "hex8": "#1ECC75FF",
    "rgba": {
        "r": 30,
        "g": 204,
        "b": 117,
        "a": 1
    },
    "hsv": {
        "h": 150.0000000000001,
        "s": 0.8531,
        "v": 0.8015000000000001,
        "a": 1
    },
    "oldHue": 150.0000000000001,
    "source": "hsva",
    "a": 1
}

Photoshop组件的属性

属性	描述
v-model	所选的颜色值，是一个对象
@input	鼠标正在移动选择颜色时的事件，其事件event颜色选择器的值
@ok	点击确定按钮触发的事件函数
@cancel	点击取消按钮触发的事件函数
acceptLabel	确定按钮的文本描述
cancelLabel	取消按钮的文本描述
currentLabel	鼠标移动选颜色前颜色的文本描述
newLabel	当前颜色的文本描述
head	颜色选择器的标题