Element UI 颜色选择器组件 - el-color-picker 使用指南

el-color-picker 是 Element UI 中的一个颜色选择器组件，用户可以通过点击颜色块或者拖动游标选择颜色。选择的颜色会被返回给调用该组件的程序。

el-color-picker 的使用

基本用法:

<template>
  <el-color-picker v-model='color'></el-color-picker>
  <div>选择的颜色: {{ color }}</div>
</template>

<script>
  export default {
    data() {
      return {
        color: '#409EFF', // 默认颜色值
      }
    }
  }
</script>

可选属性:

• v-model: 绑定颜色值，双向绑定。
• color-format: 指定颜色格式，可选值为 'hex' (默认值) 或 'rgb'。
• show-alpha: 是否显示透明度调节滑块，默认值为 false。
• disabled: 是否禁用组件，默认值为 false。
• popper-class: 自定义弹出层类名。
• predefined-colors: 预定义颜色列表。

事件:

• change: 颜色值改变时触发。

示例:

<template>
  <el-color-picker v-model='color' color-format='rgb' show-alpha :predefined-colors='predefinedColors'></el-color-picker>
  <div>选择的颜色: {{ color }}</div>
</template>

<script>
  export default {
    data() {
      return {
        color: 'rgba(255, 0, 0, 0.5)', // 默认颜色值
        predefinedColors: [ '#ff4500', '#fa8072', '#008000' ], // 预定义颜色列表
      }
    }
  }
</script>

更多用法

更多 el-color-picker 的用法和示例，请参考 Element UI 官方文档: https://element.eleme.io/#/en-US/component/color-picker.