
使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。
ColorPicker 支持普通颜色,也支持带 Alpha 通道的颜色,通过show-alpha
属性即可控制是否支持透明度的选择。
<template>
<div>
<el-color-picker v-model="color" show-alpha :predefine="predefineColors" size="medium" disabled></el-color-picker>
</div>
</template>
<script>
export default {
data() {
return {
value:null,
color: "rgba(0, 255, 64, 0.51)",
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)',
'#c7158577']
}
}
}
</script>
<style>
</style>