element/examples/docs/en-US/color-picker.md

ColorPicker

ColorPicker is a color picker component that is used to solve the need to select a color in certain scenes.

Color

:::demo ColorPicker usage is similar to DatePicker and requires v-model to bind a variable in a Vue instance. The bind variable's data type needs to be a string.

<div class="block">
  <span class="demonstration">Default value</span>
  <el-color-picker v-model="color1"></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">Empty</span>
  <el-color-picker v-model="color2"></el-color-picker>
</div>

<style>
</style>

<script>
  export default {
    data() {
      return {
        color1: '#ff0',
        color2: null
      }
    }
  };
</script>

:::

Color and alpha

:::demo ColorPicker supports normal colors, also supports alpha-channel colors, through the show-alpha attribute to control whether to support the use of transparency.

<div class="block">
  <span class="demonstration">Default value</span>
  <el-color-picker v-model="color3" show-alpha></el-color-picker>
</div>
<div class="block">
  <span class="demonstration">Empty</span>
  <el-color-picker v-model="color4" show-alpha></el-color-picker>
</div>

<script>
  export default {
    data() {
      return {
        color3: 'rgba(128, 33, 22, 0.8)',
        color4: null
      }
    }
  };
</script>

:::

Attributes

Attribute	Description	Type	Accepted Values	Default
show-alpha	Whether to display the alpha slider.	Boolean	—	false
color-format	Write the v-model's color format. In the case of show-alpha is true, the default value is rgb, otherwise hex.	string	hsl, hsv, hex, rgb	hex