vue-color chrome-picker bug All In One

vue-color chrome-picker bug All In One

import demo bug

// ❌ chrome
import { chrome } from 'vue-color';
// import { Chrome } from 'vue-color';

const defaultProps = {
    hex: '#194d33e6',
    hsl: {
        h: 150,
        s: 0.5,
        l: 0.2,
        a: 0.9
    },
    hsv: {
        h: 150,
        s: 0.66,
        v: 0.30,
        a: 0.9
    },
    rgba: {
        r: 159,
        g: 96,
        b: 43,
        a: 0.9
    },
    a: 0.9
};

// 基准色5个
const basicColors = [
    '#8F78FF',
    '#000000',
    '#FFFFFF',
    '#B2BEC3',
    '#1E2731',
];

export default {
    name: 'ColorPicker',
    components: {
        'chrome-picker': chrome,
        // 'chrome-picker': Chrome,
    },
    props: {
        colorProps: {
            type: Object,
            required: true,
            default: () => ({
                color: '#000',
            }),
        },
        color: {
            type: String,
            required: true,
            default: '#000',
        },
    },
    data () {
        return {
            colors: defaultProps,
            basicColors,
        };
    },
    computed: {
        bgc () {
            return this.colors.hex;
        },
    },
    methods: {
        onOk () {
            console.log('ok');
        },
        onCancel () {
            console.log('cancel');
        },
        updateValue (value) {
            this.colors = value;
        },
    },
    created () {
        // 
    },
};

solution

<template>
    <section>
        <chrome-picker :value="colors" @input="updateValue"></chrome-picker>
    </section>
</template>

<script>

// import { chrome } from 'vue-color';
// ✅ Chrome
import { Chrome } from 'vue-color';

const defaultProps = {
    hex: '#194d33e6',
    hsl: {
        h: 150,
        s: 0.5,
        l: 0.2,
        a: 0.9
    },
    hsv: {
        h: 150,
        s: 0.66,
        v: 0.30,
        a: 0.9
    },
    rgba: {
        r: 159,
        g: 96,
        b: 43,
        a: 0.9
    },
    a: 0.9
};

// 基准色5个
const basicColors = [
    '#8F78FF',
    '#000000',
    '#FFFFFF',
    '#B2BEC3',
    '#1E2731',
];

export default {
    name: 'ColorPicker',
    components: {
        // 'chrome-picker': chrome,
        'chrome-picker': Chrome,
    },
    props: {
        colorProps: {
            type: Object,
            required: true,
            default: () => ({
                color: '#000',
            }),
        },
        color: {
            type: String,
            required: true,
            default: '#000',
        },
    },
    data () {
        return {
            colors: defaultProps,
            basicColors,
        };
    },
    computed: {
        bgc () {
            return this.colors.hex;
        },
    },
    methods: {
        onOk () {
            console.log('ok');
        },
        onCancel () {
            console.log('cancel');
        },
        updateValue (value) {
            this.colors = value;
        },
    },
    created () {
        // 
    },
};
</script>

<style lang="scss" scoped>
    // 
</style>

refs

https://github.com/xiaokaike/vue-color

---

---

©xgqfrms 2012-2020

www.cnblogs.com/xgqfrms 发布文章使用：只允许注册用户才可以访问！

原创文章，版权所有©️xgqfrms, 禁止转载 🈲️，侵权必究⚠️！

---