ColorPicker 颜色选择器

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

基础用法

ColorPicker 颜色选择器 - 图1

使用 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>
  10. <script>
  11.   export default {
  12.     data() {
  13.       return {
  14.         color1: '#409EFF',
  15.         color2: null
  16.       }
  17.     }
  18.   };
  19. </script>

显示代码

选择透明度

ColorPicker 颜色选择器 - 图2

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

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

显示代码

预定义颜色

ColorPicker 颜色选择器 - 图3

ColorPicker 支持预定义颜色

  1. <el-color-picker
  2.   v-model="color5"
  3.   show-alpha
  4.   :predefine="predefineColors">
  5. </el-color-picker>
  7. <script>
  8.   export default {
  9.     data() {
  10.       return {
  11.         color5: 'rgba(255, 69, 0, 0.68)',
  12.         predefineColors: [
  13.           '#ff4500',
  14.           '#ff8c00',
  15.           '#ffd700',
  16.           '#90ee90',
  17.           '#00ced1',
  18.           '#1e90ff',
  19.           '#c71585',
  20.           'rgba(255, 69, 0, 0.68)',
  21.           'rgb(255, 120, 0)',
  22.           'hsv(51, 100, 98)',
  23.           'hsva(120, 40, 94, 0.5)',
  24.           'hsl(181, 100%, 37%)',
  25.           'hsla(209, 100%, 56%, 0.73)',
  26.           '#c7158577'
  27.         ]
  28.       }
  29.     }
  30.   };
  31. </script>

不同尺寸

ColorPicker 颜色选择器 - 图4

  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>
  6. <script>
  7.   export default {
  8.     data() {
  9.       return {
  10.         color4: '#409EFF'
  11.       }
  12.     }
  13.   };
  14. </script>

显示代码

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 — —
predefine 预定义颜色 array — —

Events

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

原文: http://element-cn.eleme.io/#/zh-CN/component/color-picker