ColorPicker 顏色選擇器

用於顏色選擇，支持多種格式。

基礎用法

使用 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>

選擇透明度

ColorPicker 支持普通顏色，也支持帶 Alpha 通道的顏色，通過show-alpha屬性即可控制是否支持透明度的選擇。

<el-color-picker v-model="color3" show-alpha></el-color-picker>

<script>
  export default {
    data() {
      return {
        color3: 'rgba(19, 206, 102, 0.8)'
      }
    }
  };
</script>

不同尺寸

<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>

<script>
  export default {
    data() {
      return {
        color4: '#409EFF'
      }
    }
  };
</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	—	—

Events

事件名稱	說明	回調參數
change	當綁定值變化時觸發	當前值
active-change	面板中當前顯示的顏色發生改變時觸發	當前顯示的顏色值