【Vue.js】Vue.js组件库Element中的时间选择器、日期选择器、日期时间选择器和颜色选择器

比眉伴天荒 2022-12-02 13:53 1358阅读 0赞

## 1、TimePicker 时间选择器 ##

用于选择或输入日期。

#### 固定时间点 ####

提供几个固定的时间点供用户选择。  
![20200831145158463.png_pic_center][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center][]  
使用 el-time-select 标签，分别通过start、end和step指定可选的起始时间、结束时间和步长。

<el-time-select
      v-model="value"
      :picker-options="{
        start: '08:30',
        step: '00:15',
        end: '18:30'
      }"
      placeholder="选择时间">
    </el-time-select>
    
    <script>
      export default {
        data() {
          return {
            value: ''
          };
        }
      }
    </script>

#### 任意时间点 ####

可以选择任意时间。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2][]  
使用 el-time-picker 标签，通过selectableRange限制可选时间范围。提供了两种交互方式：默认情况下通过鼠标滚轮进行选择，打开arrow-control属性则通过界面上的箭头进行选择。

<template>
      <el-time-picker
        v-model="value1"
        :picker-options="{
          selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点">
      </el-time-picker>
      <el-time-picker
        arrow-control
        v-model="value2"
        :picker-options="{
          selectableRange: '18:30:00 - 20:30:00'
        }"
        placeholder="任意时间点">
      </el-time-picker>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: new Date(2016, 9, 10, 18, 40),
            value2: new Date(2016, 9, 10, 18, 40)
          };
        }
      }
    </script>

#### 固定时间范围 ####

若先选择开始时间，则结束时间内备选项的状态会随之改变。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4][]

<template>
      <el-time-select
        placeholder="起始时间"
        v-model="startTime"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30'
        }">
      </el-time-select>
      <el-time-select
        placeholder="结束时间"
        v-model="endTime"
        :picker-options="{
          start: '08:30',
          step: '00:15',
          end: '18:30',
          minTime: startTime
        }">
      </el-time-select>
    </template>
    
    <script>
      export default {
        data() {
          return {
            startTime: '',
            endTime: ''
          };
        }
      }
    </script>

#### 任意时间范围 ####

可选择任意的时间范围。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6][]  
添加is-range属性即可选择时间范围，同样支持arrow-control属性。

<template>
      <el-time-picker
        is-range
        v-model="value1"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
      <el-time-picker
        is-range
        arrow-control
        v-model="value2"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        placeholder="选择时间范围">
      </el-time-picker>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
            value2: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]
          };
        }
      }
    </script>

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>date(TimePicker) / string(TimeSelect)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>完全只读</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>文本框可输入</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否显示清除按钮</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸</td> 
   <td>string</td> 
   <td>medium / small / mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>非范围选择时的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>start-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>end-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>is-range</td> 
   <td>是否为时间范围选择，仅对<code>&lt;el-time-picker&gt;</code>有效</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>arrow-control</td> 
   <td>是否使用箭头进行时间选择，仅对<code>&lt;el-time-picker&gt;</code>有效</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对齐方式</td> 
   <td>string</td> 
   <td>left / center / right</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>TimePicker 下拉框的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>picker-options</td> 
   <td>当前时间日期选择器特有的选项参考下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>range-separator</td> 
   <td>选择范围时的分隔符</td> 
   <td>string</td> 
   <td>-</td> 
   <td>‘-’</td> 
  </tr> 
  <tr> 
   <td>value-format</td> 
   <td>可选，仅TimePicker时可用，绑定值的格式。不指定则绑定值为 Date 对象 string</td> 
   <td>日期格式</td> 
   <td>—</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>default-value</td> 
   <td>可选，选择器打开时默认显示的时间</td> 
   <td>Date(TimePicker) / string(TimeSelect)</td> 
   <td>可被new Date()解析(TimePicker) / 可选值(TimeSelect)</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>原生属性</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>prefix-icon</td> 
   <td>自定义头部图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-time</td> 
  </tr> 
  <tr> 
   <td>clear-icon</td> 
   <td>自定义清空图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-circle-close</td> 
  </tr> 
 </tbody> 
</table>

#### Time Select Options ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>start</td> 
   <td>开始时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>09:00</td> 
  </tr> 
  <tr> 
   <td>end</td> 
   <td>结束时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>18:00</td> 
  </tr> 
  <tr> 
   <td>step</td> 
   <td>间隔时间</td> 
   <td>string</td> 
   <td>—</td> 
   <td>00:30</td> 
  </tr> 
  <tr> 
   <td>minTime</td> 
   <td>最小时间，小于该时间的时间段将被禁用</td> 
   <td>string</td> 
   <td>—</td> 
   <td>00:00</td> 
  </tr> 
  <tr> 
   <td>maxTime</td> 
   <td>最大时间，大于该时间的时间段将被禁用</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Time Picker Options ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>selectableRange</td> 
   <td>可选时间段，例如’18:30:00 - 20:30:00’或者传入数组[‘09:30:00 - 12:00:00’, ‘14:30:00 - 18:30:00’]</td> 
   <td>string / array</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>时间格式化(TimePicker)</td> 
   <td>string</td> 
   <td>小时：HH，分：mm，秒：ss，AM/PM A</td> 
   <td>‘HH:mm:ss’</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>用户确认选定的值时触发</td> 
   <td>组件绑定值</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当 input 失去焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当 input 获得焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
 </tbody> 
</table>

#### Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>使 input 获取焦点</td> 
   <td>-</td> 
  </tr> 
 </tbody> 
</table>

## 2、DatePicker 日期选择器 ##

用于选择或输入日期。

#### 选择日 ####

以「日」为基本单位，基础的日期选择控件。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8][]  
基本单位由type属性指定。快捷选项需配置picker-options对象中的shortcuts，禁用日期通过 disabledDate 设置，传入函数。

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now();
              },
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            value1: '',
            value2: '',
          };
        }
      };
    </script>

#### 其他日期单位 ####

通过扩展基础的日期选择，可以选择周、月、年或多个日期。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 12][]

<div class="container">
      <div class="block">
        <span class="demonstration">周</span>
        <el-date-picker
          v-model="value1"
          type="week"
          format="yyyy 第 WW 周"
          placeholder="选择周">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">月</span>
        <el-date-picker
          v-model="value2"
          type="month"
          placeholder="选择月">
        </el-date-picker>
      </div>
    </div>
    <div class="container">
      <div class="block">
        <span class="demonstration">年</span>
        <el-date-picker
          v-model="value3"
          type="year"
          placeholder="选择年">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">多个日期</span>
        <el-date-picker
          type="dates"
          v-model="value4"
          placeholder="选择一个或多个日期">
        </el-date-picker>
      </div>
    </div>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: '',
            value3: '',
            value4: ''
          };
        }
      };
    </script>

#### 选择日期范围 ####

可在一个选择器中便捷地选择一个时间范围。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 13][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 14][]  
在选择日期范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前月份，可以使用unlink-panels属性解除联动。

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: '',
            value2: ''
          };
        }
      };
    </script>

#### 选择月份范围 ####

可在一个选择器中便捷地选择一个月份范围。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 15][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 16][]  
在选择月份范围时，默认情况下左右面板会联动。如果希望两个面板各自独立切换当前年份，可以使用unlink-panels属性解除联动。

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="monthrange"
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="monthrange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '本月',
                onClick(picker) {
                  picker.$emit('pick', [new Date(), new Date()]);
                }
              }, {
                text: '今年至今',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date(new Date().getFullYear(), 0);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近六个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setMonth(start.getMonth() - 6);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: '',
            value2: ''
          };
        }
      };
    </script>

#### 日期格式 ####

使用format指定输入框的格式；使用value-format指定绑定值的格式。  
默认情况下，组件接受并返回Date对象。以下为可用的格式化字串，以 UTC 2017年1月2日 03:04:05 为例：

> 请注意大小写

<table> 
 <thead> 
  <tr> 
   <th>格式</th> 
   <th>含义</th> 
   <th>备注</th> 
   <th>举例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>yyyy</td> 
   <td>年</td> 
   <td>&nbsp;</td> 
   <td>2017</td> 
  </tr> 
  <tr> 
   <td>M</td> 
   <td>月</td> 
   <td>不补0</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>MM</td> 
   <td>月</td> 
   <td>&nbsp;</td> 
   <td>01</td> 
  </tr> 
  <tr> 
   <td>W</td> 
   <td>周</td> 
   <td>仅周选择器的 format 可用；不补0</td> 
   <td>1</td> 
  </tr> 
  <tr> 
   <td>WW</td> 
   <td>周</td> 
   <td>仅周选择器的 format 可用</td> 
   <td>01</td> 
  </tr> 
  <tr> 
   <td>d</td> 
   <td>日</td> 
   <td>不补0</td> 
   <td>2</td> 
  </tr> 
  <tr> 
   <td>dd</td> 
   <td>日</td> 
   <td>&nbsp;</td> 
   <td>02</td> 
  </tr> 
  <tr> 
   <td>H</td> 
   <td>小时</td> 
   <td>24小时制；不补0</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>HH</td> 
   <td>小时</td> 
   <td>24小时制</td> 
   <td>03</td> 
  </tr> 
  <tr> 
   <td>h</td> 
   <td>小时</td> 
   <td>12小时制，须和 A 或 a 使用；不补0</td> 
   <td>3</td> 
  </tr> 
  <tr> 
   <td>hh</td> 
   <td>小时</td> 
   <td>12小时制，须和 A 或 a 使用</td> 
   <td>03</td> 
  </tr> 
  <tr> 
   <td>m</td> 
   <td>分钟</td> 
   <td>不补0</td> 
   <td>4</td> 
  </tr> 
  <tr> 
   <td>mm</td> 
   <td>分钟</td> 
   <td>&nbsp;</td> 
   <td>04</td> 
  </tr> 
  <tr> 
   <td>s</td> 
   <td>秒</td> 
   <td>不补0</td> 
   <td>5</td> 
  </tr> 
  <tr> 
   <td>ss</td> 
   <td>秒</td> 
   <td>&nbsp;</td> 
   <td>05</td> 
  </tr> 
  <tr> 
   <td>A</td> 
   <td>AM/PM</td> 
   <td>仅 format 可用，大写</td> 
   <td>AM</td> 
  </tr> 
  <tr> 
   <td>a</td> 
   <td>am/pm</td> 
   <td>仅 format 可用，小写</td> 
   <td>am</td> 
  </tr> 
  <tr> 
   <td>timestamp</td> 
   <td>JS时间戳</td> 
   <td>仅 value-format 可用；组件绑定值为number类型</td> 
   <td>1483326245000</td> 
  </tr> 
  <tr> 
   <td>[MM]</td> 
   <td>不需要格式化字符</td> 
   <td>使用方括号标识不需要格式化的字符 (如 [A] [MM])</td> 
   <td>MM</td> 
  </tr> 
 </tbody> 
</table>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 17][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 18][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 19][]

<template>
      <div class="block">
        <span class="demonstration">默认为 Date 对象</span>
        <div class="demonstration">值：{
       { value1 }}</div>
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">使用 value-format</span>
        <div class="demonstration">值：{
       { value2 }}</div>
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="yyyy-MM-dd">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">时间戳</span>
        <div class="demonstration">值：{
       { value3 }}</div>
        <el-date-picker
          v-model="value3"
          type="date"
          placeholder="选择日期"
          format="yyyy 年 MM 月 dd 日"
          value-format="timestamp">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: '',
            value3: ''
          };
        }
      };
    </script>

#### 默认显示日期 ####

在选择日期范围时，指定起始日期和结束日期的默认时刻。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 20][]  
选择日期范围时，默认情况下，起始日期和结束日期的时间部分均为当天的 0 点 0 分 0 秒。通过default-time可以分别指定二者的具体时刻。default-time接受一个数组，其中的值为形如12:00:00的字符串，第一个值控制起始日期的时刻，第二个值控制结束日期的时刻。

<template>
      <div class="block">
        <p>组件值：{
       { value }}</p>
        <el-date-picker
          v-model="value"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value: ''
          };
        }
      };
    </script>

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>date(DatePicker) / array(DateRangePicker)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>完全只读</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>文本框可输入</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否显示清除按钮</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸</td> 
   <td>string</td> 
   <td>large, small, mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>非范围选择时的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>start-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>end-placeholder</td> 
   <td>范围选择时结束日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>显示类型</td> 
   <td>string</td> 
   <td>year/month/date/dates/ week/datetime/datetimerange/ daterange/monthrange</td> 
   <td>date</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>显示在输入框中的格式</td> 
   <td>string</td> 
   <td>日期格式</td> 
   <td>yyyy-MM-dd</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对齐方式</td> 
   <td>string</td> 
   <td>left, center, right</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>DatePicker</td> 
   <td>下拉框的类名</td> 
   <td>string</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>picker-options</td> 
   <td>当前时间日期选择器特有的选项参考下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>range-separator</td> 
   <td>选择范围时的分隔符</td> 
   <td>string</td> 
   <td>—</td> 
   <td>‘-’</td> 
  </tr> 
  <tr> 
   <td>default-value</td> 
   <td>可选，选择器打开时默认显示的时间</td> 
   <td>Date</td> 
   <td>可被new Date()解析</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>default-time</td> 
   <td>范围选择时选中日期所使用的当日内具体时刻</td> 
   <td>string[]</td> 
   <td>数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻，不指定会使用时刻 00:00:00</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>value-format</td> 
   <td>可选，绑定值的格式。不指定则绑定值为 Date 对象 string</td> 
   <td>日期格式</td> 
   <td>—</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>原生属性</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>unlink-panels</td> 
   <td>在范围选择器里取消两个日期面板之间的联动</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>prefix-icon</td> 
   <td>自定义头部图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-date</td> 
  </tr> 
  <tr> 
   <td>clear-icon</td> 
   <td>自定义清空图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-circle-close</td> 
  </tr> 
  <tr> 
   <td>validate-event</td> 
   <td>输入时是否触发表单的校验</td> 
   <td>boolean</td> 
   <td>-</td> 
   <td>true</td> 
  </tr> 
 </tbody> 
</table>

#### Picker Options ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>shortcuts</td> 
   <td>设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表</td> 
   <td>Object[]</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabledDate</td> 
   <td>设置禁用状态，参数为当前日期，要求返回 Boolean</td> 
   <td>Function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>cellClassName</td> 
   <td>设置日期的 className</td> 
   <td>Function(Date)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>firstDayOfWeek</td> 
   <td>周起始日</td> 
   <td>Number</td> 
   <td>1 到 7</td> 
   <td>7</td> 
  </tr> 
  <tr> 
   <td>onPick</td> 
   <td>选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效</td> 
   <td>Function({ maxDate, minDate })</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Shortcuts ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>text</td> 
   <td>标题文本</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>onClick</td> 
   <td>选中后的回调函数，参数是 vm，可通过触发 ‘pick’ 事件设置选择器的值。例如 vm.$emit(‘pick’, new Date())</td> 
   <td>function</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>用户确认选定的值时触发</td> 
   <td>组件绑定值。格式与绑定值一致，可受 value-format 控制</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当 input 失去焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当 input 获得焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
 </tbody> 
</table>

#### Methods ####

<table> 
 <thead> 
  <tr> 
   <th>方法名</th> 
   <th>说明</th> 
   <th>参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>focus</td> 
   <td>使 input 获取焦点</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

## 3、DateTimePicker 日期时间选择器 ##

在同一个选择器里选择日期和时间。

> DateTimePicker 由 DatePicker 和 TimePicker 派生，Picker Options 或者其他选项可以参照 DatePicker 和 TimePicker。

#### 日期和时间点 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 21][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 22][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 23][]  
通过设置type属性为datetime，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="datetime"
          placeholder="选择日期时间"
          align="right"
          :picker-options="pickerOptions">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">设置默认时间</span>
        <el-date-picker
          v-model="value3"
          type="datetime"
          placeholder="选择日期时间"
          default-time="12:00:00">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '今天',
                onClick(picker) {
                  picker.$emit('pick', new Date());
                }
              }, {
                text: '昨天',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24);
                  picker.$emit('pick', date);
                }
              }, {
                text: '一周前',
                onClick(picker) {
                  const date = new Date();
                  date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', date);
                }
              }]
            },
            value1: '',
            value2: '',
            value3: ''
          };
        }
      };
    </script>

#### 日期和时间范围 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 24][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 25][]  
设置type为datetimerange即可选择日期和时间范围。

<template>
      <div class="block">
        <span class="demonstration">默认</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">带快捷选项</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          :picker-options="pickerOptions"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          align="right">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            pickerOptions: {
              shortcuts: [{
                text: '最近一周',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近一个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  picker.$emit('pick', [start, end]);
                }
              }, {
                text: '最近三个月',
                onClick(picker) {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  picker.$emit('pick', [start, end]);
                }
              }]
            },
            value1: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
            value2: ''
          };
        }
      };
    </script>

#### 默认的起始与结束时刻 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 26][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 27][]  
使用datetimerange进行范围选择时，在日期选择面板中选定起始与结束的日期，默认会使用该日期的00:00:00作为起始与结束的时刻；通过选项default-time可以控制选中起始与结束日期时所使用的具体时刻。default-time接受一个数组，数组每项值为字符串，形如12:00:00，其中第一项控制起始日期的具体时刻，第二项控制结束日期的具体时刻。

<template>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00</span>
        <el-date-picker
          v-model="value1"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00']">
        </el-date-picker>
      </div>
      <div class="block">
        <span class="demonstration">起始日期时刻为 12:00:00，结束日期时刻为 08:00:00</span>
        <el-date-picker
          v-model="value2"
          type="datetimerange"
          align="right"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['12:00:00', '08:00:00']">
        </el-date-picker>
      </div>
    </template>
    
    <script>
      export default {
        data() {
          return {
            value1: '',
            value2: ''
          };
        }
      };
    </script>

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>date(DateTimePicker) / array(DateTimeRangePicker)</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>readonly</td> 
   <td>完全只读</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>editable</td> 
   <td>文本框可输入</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>clearable</td> 
   <td>是否显示清除按钮</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>true</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>输入框尺寸</td> 
   <td>string</td> 
   <td>large, small, mini</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>placeholder</td> 
   <td>非范围选择时的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>start-placeholder</td> 
   <td>范围选择时开始日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>end-placeholder</td> 
   <td>范围选择时结束日期的占位内容</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>time-arrow-control</td> 
   <td>是否使用箭头进行时间选择</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>type</td> 
   <td>显示类型</td> 
   <td>string</td> 
   <td>year/month/date/week/ datetime/datetimerange/daterange</td> 
   <td>date</td> 
  </tr> 
  <tr> 
   <td>format</td> 
   <td>显示在输入框中的格式</td> 
   <td>string</td> 
   <td>日期格式</td> 
   <td>yyyy-MM-dd HH:mm:ss</td> 
  </tr> 
  <tr> 
   <td>align</td> 
   <td>对齐方式</td> 
   <td>string</td> 
   <td>left, center, right</td> 
   <td>left</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>DateTimePicker</td> 
   <td>下拉框的类名</td> 
   <td>string</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>picker-options</td> 
   <td>当前时间日期选择器特有的选项参考下表</td> 
   <td>object</td> 
   <td>—</td> 
   <td>{}</td> 
  </tr> 
  <tr> 
   <td>range-separator</td> 
   <td>选择范围时的分隔符</td> 
   <td>string</td> 
   <td>-</td> 
   <td>‘-’</td> 
  </tr> 
  <tr> 
   <td>default-value</td> 
   <td>可选，选择器打开时默认显示的时间</td> 
   <td>Date</td> 
   <td>可被new Date()解析</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>default-time</td> 
   <td>选中日期后的默认具体时刻</td> 
   <td>非范围选择时：string / 范围选择时：string[] 非范围选择时：形如12:00:00的字符串；范围选择时：数组，长度为 2，每项值为字符串，形如12:00:00，第一项指定开始日期的时刻，第二项指定结束日期的时刻。不指定会使用时刻 00:00:00</td> 
   <td>—</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>value-format</td> 
   <td>可选，绑定值的格式。不指定则绑定值为 Date 对象</td> 
   <td>string</td> 
   <td>日期格式</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>原生属性</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>unlink-panels</td> 
   <td>在范围选择器里取消两个日期面板之间的联动</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>prefix-icon</td> 
   <td>自定义头部图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-date</td> 
  </tr> 
  <tr> 
   <td>clear-icon</td> 
   <td>自定义清空图标的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>el-icon-circle-close</td> 
  </tr> 
 </tbody> 
</table>

#### Picker Options ####

#### Shortcuts ####

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>Event Name</th> 
   <th>Description</th> 
   <th>Parameters</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>用户确认选定的值时触发</td> 
   <td>组件绑定值。格式与绑定值一致，可受 value-format 控制</td> 
  </tr> 
  <tr> 
   <td>blur</td> 
   <td>当 input 失去焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
  <tr> 
   <td>focus</td> 
   <td>当 input 获得焦点时触发</td> 
   <td>组件实例</td> 
  </tr> 
 </tbody> 
</table>

#### Methods ####

#### Slots ####

<table> 
 <thead> 
  <tr> 
   <th>Name</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>range-separator</td> 
   <td>自定义分隔符</td> 
  </tr> 
 </tbody> 
</table>

## 4、ColorPicker 颜色选择器 ##

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

#### 基础用法 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 28][]  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 29][]  
使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。

<div class="block">
      <span class="demonstration">有默认值</span>
      <el-color-picker v-model="color1"></el-color-picker>
    </div>
    <div class="block">
      <span class="demonstration">无默认值</span>
      <el-color-picker v-model="color2"></el-color-picker>
    </div>
    
    <script>
      export default {
        data() {
          return {
            color1: '#409EFF',
            color2: null
          }
        }
      };
    </script>

#### 选择透明度 ####

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

<el-color-picker v-model="color" show-alpha></el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: 'rgba(19, 206, 102, 0.8)'
          }
        }
      };
    </script>

#### 预定义颜色 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 31][]  
ColorPicker 支持预定义颜色。

<el-color-picker
      v-model="color"
      show-alpha
      :predefine="predefineColors">
    </el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: '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'
            ]
          }
        }
      };
    </script>

#### 不同尺寸 ####

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 32][]

<el-color-picker v-model="color"></el-color-picker>
    <el-color-picker v-model="color" size="medium"></el-color-picker>
    <el-color-picker v-model="color" size="small"></el-color-picker>
    <el-color-picker v-model="color" size="mini"></el-color-picker>
    
    <script>
      export default {
        data() {
          return {
            color: '#409EFF'
          }
        }
      };
    </script>

#### Attributes ####

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>说明</th> 
   <th>类型</th> 
   <th>可选值</th> 
   <th>默认值</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>value / v-model</td> 
   <td>绑定值</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>disabled</td> 
   <td>是否禁用</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>size</td> 
   <td>尺寸</td> 
   <td>string</td> 
   <td>—</td> 
   <td>medium / small / mini</td> 
  </tr> 
  <tr> 
   <td>show-alpha</td> 
   <td>是否支持透明度选择</td> 
   <td>boolean</td> 
   <td>—</td> 
   <td>false</td> 
  </tr> 
  <tr> 
   <td>color-format</td> 
   <td>写入 v-model 的颜色的格式</td> 
   <td>string</td> 
   <td>hsl / hsv / hex / rgb</td> 
   <td>hex（show-alpha 为 false）/ rgb（show-alpha 为 true）</td> 
  </tr> 
  <tr> 
   <td>popper-class</td> 
   <td>ColorPicker 下拉框的类名</td> 
   <td>string</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
  <tr> 
   <td>predefine</td> 
   <td>预定义颜色</td> 
   <td>array</td> 
   <td>—</td> 
   <td>—</td> 
  </tr> 
 </tbody> 
</table>

#### Events ####

<table> 
 <thead> 
  <tr> 
   <th>事件名称</th> 
   <th>说明</th> 
   <th>回调参数</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change</td> 
   <td>当绑定值变化时触发</td> 
   <td>当前值</td> 
  </tr> 
  <tr> 
   <td>active-change</td> 
   <td>面板中当前显示的颜色发生改变时触发</td> 
   <td>当前显示的颜色值</td> 
  </tr> 
 </tbody> 
</table>

[20200831145158463.png_pic_center]: /images/20221123/c155d5d1ce2e4568803385195dffa2de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/abb89fa4bba74ed7afddc0fd64548743.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/7705fe381b664a549ba96f6da614035f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/f684f24eceab4eeb9e055bf36b29932f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/57b599ac44e64befa9a9f2a3face13cd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/c16157e60668493d865a372915fb1712.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/5d4a86602c584ca8ae57e523e7976c02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/160a688b191645608c73467dccde2959.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/6d6e5a0cd20e43ab9bd3ddf39a601f33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20221123/688d3f65cd2f4ee5a9eeeaa684ce858f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20221123/28e1e0a5526943909f54f2af0c5ab3b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20221123/d43bcb4e42634716ab88c19cd34f4e71.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20221123/645e2ae1cbfb486b80c79d687cd0cf6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20221123/e2f827e9a81846179e0cc36afa5a7ab3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 13]: /images/20221123/44d0677b7f8743349a6c44e59ca18654.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 14]: /images/20221123/6b10edc1a8d6462d915a9f2ba4f99f07.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 15]: /images/20221123/208b54c9629a41ecaf18848ac705c82d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 16]: /images/20221123/93bf8fb021854ed9979230e21f240b6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 17]: /images/20221123/cee2736f77b040c59970fd5dc5234a19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 18]: /images/20221123/d6c08916f0864ef19e2775e53e6393b3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 19]: /images/20221123/b8212b10427444ad8734432ea5e13460.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 20]: /images/20221123/963026aacaf24a598db9316ad39d3135.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 21]: /images/20221123/79d9bff5762741dcbd74bd3a298c775a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 22]: /images/20221123/d8ed782cb3c5439d8b310fc9523c94ed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 23]: /images/20221123/3143aa59a4c84d4ca5c765fe979c9b19.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 24]: /images/20221123/3037df5f561b4f01a1db21e68249f81f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 25]: /images/20221123/a91a054a671741019a9e3255a66c7009.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 26]: /images/20221123/2ca5d9e78abf4b868256ecfc636b006b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 27]: /images/20221123/274cad607b4049fea8296d4742ebada9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 28]: /images/20221123/0f76a2e5c6fa4add9c55eb3f3892e840.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 29]: /images/20221123/044be0584f3243158b059805a8a1874c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 30]: /images/20221123/27da64eff09e46dd858239fc26602c16.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 31]: /images/20221123/c5f967af0ac740bb8432e3d5c5b39812.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dvbmd4aWZhY2FpX2JlbGlldmU_size_16_color_FFFFFF_t_70_pic_center 32]: /images/20221123/dc2e081ed6c543b9b6f8518ccae4722a.png