xgqfrms™, xgqfrms® : xgqfrms's offical website of cnblogs! xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

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, 禁止转载 🈲️,侵权必究⚠️!


posted @   xgqfrms  阅读(162)  评论(2编辑  收藏  举报
编辑推荐:
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
阅读排行:
· 开发者新选择:用DeepSeek实现Cursor级智能编程的免费方案
· Tinyfox 发生重大改版
· 独立开发经验谈:如何通过 Docker 让潜在客户快速体验你的系统
· 小米CR6606,CR6608,CR6609 启用SSH和刷入OpenWRT 23.05.5
· 近期最值得关注的AI技术报告与Agent综述!
历史上的今天:
2020-11-22 Chinese Parents Game
2020-11-22 making a resizable div effect in vanilla js
2019-11-22 CSS Houdini
2019-11-22 web performance optimise & css
2019-11-22 CORS OPTIONS
2019-11-22 DOM 0, DOM1
2018-11-22 Angular 2018 All in One
点击右上角即可分享
微信分享提示