Color-picker 颜色选择器
用于颜色选择，支持多种格式。
无默认值
有默认值
基础用法
使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。
查看代码 < />
<template>
<section class="color-picker-demo">
<w-row :gutter="20">
<w-col :span="12">
<p class="title">无默认值</p>
<w-color-picker v-model="colorValue" @change="handleChange"></w-color-picker>
</w-col>
<w-col :span="12">
<p class="title">有默认值</p>
<w-color-picker v-model="colorValueDefault"></w-color-picker>
</w-col>
</w-row>
</section>
</template>
<script>
export default {
data() {
return {
colorValue: '',
colorValueDefault: '#0f49ed',
}
},
methods: {
handleChange(val) {
console.log(val)
}
}
}
<|/script>透明度
查看代码 < />
<template>
<section class="color-picker-demo">
<w-row :gutter="20">
<w-col :span="12">
<w-color-picker v-model="colorValue" show-alpha></w-color-picker>
</w-col>
<w-col :span="12">
<w-color-picker v-model="colorDis" show-alpha disabled></w-color-picker>
</w-col>
</w-row>
</section>
</template>
<script>
export default {
data() {
return {
colorValue: 'rgba(211, 97, 154, 0.68)',
colorDis: '',
}
}
}
</script>预定义颜色值
查看代码 < />
<template>
<section class="color-picker-demo">
<w-row :gutter="20">
<w-col :span="24">
<w-color-picker v-model="colorValue" show-alpha :predefine="predefineColors"></w-color-picker>
</w-col>
</w-row>
</section>
</template>
<script>
export default {
data() {
return {
colorValue: '',
predefineColors: [
'#ff4500',
'#ff8c00',
'#ffd700',
'#90ee90',
'#00ced1',
'#1e90ff',
'#c71585',
'rgba(255, 69, 0, 0.68)',
'rgb(255, 120, 0)',
'hsv(51, 100, 98)',
'hsva(120, 40, 94, 0.5)',
'hsl(181, 100%, 37%)',
'hsla(209, 100%, 56%, 0.73)',
],
}
}
}
</script>格式：rgb
格式：hsv
格式：hex
格式：hsl
尺寸选择
查看代码 < />
<template>
<section class="color-picker-demo">
<w-row :gutter="20">
<w-col :span="6">
<p class="title">格式：rgb</p>
<w-color-picker v-model="color1" color-format='rgb'></w-color-picker>
</w-col>
<w-col :span="6">
<p class="title">格式：hsv</p>
<w-color-picker v-model="color2" size="medium" color-format='hsv'></w-color-picker>
</w-col>
<w-col :span="6">
<p class="title">格式：hex</p>
<w-color-picker v-model="color3" size="small" color-format='hex'></w-color-picker>
</w-col>
<w-col :span="6">
<p class="title">格式：hsl</p>
<w-color-picker v-model="color4" size="mini" color-format='hsl'></w-color-picker>
</w-col>
</w-row>
</section>
</template>
<script>
export default {
data() {
return {
color1: 'rgb(24, 92, 226)',
color2: 'hsv(218, 90%, 90%)',
color3: '#0f49ed',
color4: 'hsl(224, 92%, 47%)',
}
}
}
</script>Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| value / v-model | 绑定值 | string | — | — |
| disabled | 是否禁用 | boolean | — | false |
| size | 尺寸 | string | — | medium / small / mini |
| show-alpha | 是否支持透明度选择 | boolean | — | false |
| color-format | 写入 v-model 的颜色的格式 | string | hsl / hsv / hex / rgb | hex（show-alpha 为 false）/ rgb（show-alpha 为 true） |
| popper-class | ColorPicker 下拉框的类名 | string | — | — |
| predefine | 预定义颜色 | array | — | — |
Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| change | 当绑定值变化时触发 | 当前值 |
| active-change | 面板中当前显示的颜色发生改变时触发 | 当前显示的颜色值 |
贡献者
| 类型 | 参与者 |
|---|---|
| 设计者 | UED视觉组 |
| 维护者 | UED前端组 |