// 使用
<template>
<div class="app">
<ColorPicker :show="show_color_picker" @confirm="confirm" @cancel="cancel"></ColorPicker>
</div>
</template>
<script>
import ColorPicker from "../components/ColorPicker.vue"
export default {
components: { ColorPicker },
data() {
return {
show_color_picker: true,
}
},
mounted() {},
created() {
},
methods: {
confirm(result) {
// result 返回值
/**
{
R: 14,
G: 157,
B: 144,
A: 1,
rgbaColor: 'rgba(14,157,144,1)',
hexColor: '#119d90'
}
**/
this.show_color_picker = false;
},
cancel() {
this.show_color_picker = false;
},
},
};
</script>
// 初始化颜色
defaultConfig: {
valueR: 14,
valueG: 157,
valueB: 144,
valueA: 100,
validColorR: '#119d90',
validColorG: '#119d90',
validColorB: '#119d90',
validColorA: '#119d90',
invalidColorR: '#E0E0E0',
invalidColorG: '#E0E0E0',
invalidColorB: '#E0E0E0',
invalidColorA: '#E0E0E0',
}
Prop | Type | Required | Default | Description |
---|---|---|---|---|
show | Bool |
N |
false |
显示与隐藏 |
config | Object |
N |
{} |
会替换掉默认的defaultConfig |
colorBoxStyle | Object |
N |
{} |
大圆形的样式 |
hasOpacity | Bool |
N |
false |
是否需要透明度 |
title | String |
N |
颜色选择器 |
标题 |
cancelText | String |
N |
取消 |
取消按钮 |
confirmText | String |
N |
确定 |
确定按钮 |
mainBtnColor | String |
N |
#119d90 |
确定按钮颜色 |
secondBtnColor | String |
N |
#119d90 |
取消按钮颜色 |
thirdText | String |
N |
自定义 |
自定义按钮文本 |
thirdBtnColor | String |
N |
#119d90 |
自定义按钮颜色 |
//`@confirm="confirm"`
//`@cancel="cancel"`
使用说明:
Prop | Type | Required | Default | Description |
---|---|---|---|---|
customStyle | Object |
N |
{} |
状态栏颜色样式 |