ColorPicker 颜色选择器

来源:博客园 分类: 文章浏览史 发布时间:2020-08-16 20:27:24 最后更新:2020-08-16 浏览:69
转载声明:
本文为摘录自“博客园”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2020-08-16 20:27:24

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

基础用法

使用 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 面板中当前显示的颜色发生改变时触发 当前显示的颜色值
php技术微信