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 面板中当前显示的颜色发生改变时触发 当前显示的颜色值
posted @ 2018-03-13 07:06  大姐姐小姐姐  阅读(12711)  评论(0)  编辑  收藏  举报