• ColorPicker 颜色选择器
    • 基础用法
    • 选择透明度
    • 预定义颜色
    • 不同尺寸
    • Attributes
    • Events

    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