书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

颜色选择器

使用 v-model 与 Vue 实例中的一个变量进行双向绑定,绑定的变量需要是字符串类型。

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

<template>
  <div>
    <el-color-picker v-model="color" show-alpha :predefine="predefineColors" size="medium" disabled></el-color-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value:null,
        color: "rgba(0, 255, 64, 0.51)",
        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>

<style>

</style>