UColorPicker 颜色选择器
用于选择颜色的组件。
示例
基本用法
<template>
<u-color-picker v-model="color"></u-color-picker>
</template>
<script>
export default {
data() {
return {
color: '#ff5a5a',
};
},
};
</script>
直接使用调色板
<template>
<u-pallette v-model="color"></u-pallette>
</template>
<script>
export default {
data() {
return {
color: '#ff5a5a',
};
},
};
</script>
直接使用默认值
<template>
<u-pallette v-model="color"></u-pallette>
</template>
<script>
export default {
data() {
return {
color: 'white',
};
},
};
</script>
UColorPicker API
Props/Attrs
Prop/Attr | Type | Options | Default | Description |
---|---|---|---|---|
value.sync, v-model | string | '#000000' |
十六进制颜色,或是 rgba() |
Slots
(default)
在调色板中插入文本或 HTML。
Events
@input
Param | Type | Description |
---|---|---|
$event | string | 调整颜色时触发 |
@change
修改时触发
Param | Type | Description |
---|---|---|
$event.value | string | 当前颜色 |
$event.oldValue | string | 旧的颜色 |
UPallette API
Props/Attrs
Prop/Attr | Type | Options | Default | Description |
---|---|---|---|---|
value.sync, v-model | string | '#000000' |
十六进制颜色,或是 rgba() |
Slots
(default)
在调色板中插入文本或 HTML。
Events
@input
Param | Type | Description |
---|---|---|
$event | string | 调整颜色时触发 |
@change
修改时触发
Param | Type | Description |
---|---|---|
$event.value | string | 当前颜色 |
$event.oldValue | string | 旧的颜色 |
@open
弹出时触发。
Param | Type | Description |
---|---|---|
$event.value | string | 弹出时的颜色值 |
senderVM | UColorPicker | 发送事件实例 |
@close
隐藏时触发。
Param | Type | Description |
---|---|---|
$event.value | string | 隐藏时的颜色值 |
senderVM | UColorPicker | 发送事件实例 |