ColorPicker 颜色选择器

用于颜色选择，支持多种格式。

基础用法

使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。

 1 <div class="block">
 2   <span class="demonstration">有默认值</span>
 3   <el-color-picker v-model="color1"></el-color-picker>
 4 </div>
 5 <div class="block">
 6   <span class="demonstration">无默认值</span>
 7   <el-color-picker v-model="color2"></el-color-picker>
 8 </div>
 9 
10 <script>
11   export default {
12     data() {
13       return {
14         color1: '#409EFF',
15         color2: null
16       }
17     }
18   };
19 </script>

View Code

选择透明度

ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过show-alpha属性即可控制是否支持透明度的选择。

 1 <el-color-picker v-model="color3" show-alpha></el-color-picker>
 2 
 3 <script>
 4   export default {
 5     data() {
 6       return {
 7         color3: 'rgba(19, 206, 102, 0.8)'
 8       }
 9     }
10   };
11 </script>

View Code

不同尺寸

 1 <el-color-picker v-model="color4"></el-color-picker>
 2 <el-color-picker v-model="color4" size="medium"></el-color-picker>
 3 <el-color-picker v-model="color4" size="small"></el-color-picker>
 4 <el-color-picker v-model="color4" size="mini"></el-color-picker>
 5 
 6 <script>
 7   export default {
 8     data() {
 9       return {
10         color4: '#409EFF'
11       }
12     }
13   };
14 </script>

View Code

Attributes

参数	说明	类型	可选值	默认值
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	—	—

Events

事件名称	说明	回调参数
change	当绑定值变化时触发	当前值
active-change	面板中当前显示的颜色发生改变时触发	当前显示的颜色值