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, 禁止转载 🈲️,侵权必究⚠️!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/15588620.html
未经授权禁止转载,违者必究!
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.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