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