019_ColorPicker颜色选择器

1. ColorPicker颜色选择器

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

1.2. 颜色选择器属性

参数	说明	类型	可选值	默认值
value / v-model	绑定值	string	无	无
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	无	无

1.3. 颜色选择器事件

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

2. ColorPicker颜色选择器例子

2.1. 使用脚手架新建一个名为element-ui-colorpicker的前端项目, 同时安装Element插件。

2.2. 编写App.vue 

<template>
  <div id="app">
    <h1>基础用法</h1>
    <div class="block">
      <span>有默认值: </span>
      <el-color-picker v-model="color11"></el-color-picker>
    </div>
    <div class="block">
      <span>无默认值: </span>
      <el-color-picker v-model="color12"></el-color-picker>
    </div>

    <h1>选择透明度</h1>
    <el-color-picker v-model="color2" show-alpha></el-color-picker>

    <h1>预定义颜色</h1>
    <el-color-picker v-model="color3" show-alpha :predefine="predefineColors"></el-color-picker>

    <h1>不同尺寸</h1>
    <el-color-picker v-model="color4"></el-color-picker>
    <el-color-picker v-model="color4" size="medium"></el-color-picker>
    <el-color-picker v-model="color4" size="small"></el-color-picker>
    <el-color-picker v-model="color4" size="mini"></el-color-picker>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color11: '#409EFF',
      color12: null,
      color2: 'rgba(19, 206, 102, 0.8)',
      color3: 'rgba(255, 69, 0, 0.68)',
      predefineColors: [
        '#ff4500',
        '#ff8c00',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff',
        '#c71585',
        'rgba(255, 69, 0, 0.68)',
        'rgb(255, 120, 0)',
        'hsv(51, 100, 98)',
        'hsva(120, 40, 94, 0.5)',
        'hsl(181, 100%, 37%)',
        'hsla(209, 100%, 56%, 0.73)',
        '#c7158577'
      ],
      color4: '#409EFF'
    }
  }
}
</script>

2.3. 运行项目