UColorPicker 颜色选择器

• 示例
  • 基本用法
  • 直接使用调色板
  • 直接使用默认值
• UColorPicker API
  • Props/Attrs
  • Slots
  • Events
• UPallette API
  • Props/Attrs
  • Slots
  • Events

用于选择颜色的组件。

示例

基本用法

<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	发送事件实例