el-color-picker详解

el-color-picker 是 Element Plus 框架中的颜色选择器组件，用于让用户选择颜色。它可以用于表单、设置等多种场景。

el-color-picker 属性详解

1. model-value / v-model:

   • 类型: String
   • 用途: 绑定的值，表示当前选中的颜色。
   • 默认值: —

2. disabled:

   • 类型: Boolean
   • 用途: 是否禁用颜色选择器。
   • 默认值: false

3. size:

   • 类型: String
   • 用途: 颜色选择器的尺寸，可选值为 large、default、small。
   • 默认值: default

4. show-alpha:

   • 类型: Boolean
   • 用途: 是否显示透明度选择。
   • 默认值: false

5. color-format:

   • 类型: String
   • 用途: 颜色格式，可选值为 hex、rgb、rgba、hsl、hsla。
   • 默认值: rgba

6. predefine:

   • 类型: Array
   • 用途: 预定义的颜色列表。
   • 默认值: —

7. popper-class:

   • 类型: String
   • 用途: 弹出框的类名。
   • 默认值: —

8. placement:

   • 类型: String
   • 用途: 弹出框的位置，可选值为 top、top-start、top-end、bottom、bottom-start、bottom-end。
   • 默认值: bottom

el-color-picker 事件详解

1. change:

   • 类型: Function
   • 用途: 颜色值变化时触发。
   • 参数: value（当前选中的颜色）

2. active-change:

   • 类型: Function
   • 用途: 颜色面板中颜色变化时触发。
   • 参数: value（当前选中的颜色）

3. focus:

   • 类型: Function
   • 用途: 颜色选择器获得焦点时触发。
   • 参数: —

4. blur:

   • 类型: Function
   • 用途: 颜色选择器失去焦点时触发。
   • 参数: —

el-color-picker 插槽详解

1. default:

   • 插槽名称: default
   • 用途: 自定义颜色选择器的触发元素。

完整示例代码

<template>
  <div>
    <h2>Color Picker 示例</h2>

    <!-- 基本用法 -->
    <el-color-picker v-model="color1"></el-color-picker>

    <!-- 禁用 -->
    <el-color-picker v-model="color2" disabled></el-color-picker>

    <!-- 显示透明度选择 -->
    <el-color-picker v-model="color3" show-alpha></el-color-picker>

    <!-- 预定义颜色 -->
    <el-color-picker v-model="color4" :predefine="predefineColors"></el-color-picker>

    <!-- 自定义颜色格式 -->
    <el-color-picker v-model="color5" color-format="hex"></el-color-picker>

    <!-- 自定义触发元素 -->
    <el-color-picker v-model="color6">
      <template #default>
        <span :style="{ background: color6 }" class="custom-trigger"></span>
      </template>
    </el-color-picker>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const color1 = ref('#409EFF')
const color2 = ref('#409EFF')
const color3 = ref('rgba(64, 158, 255, 0.8)')
const color4 = ref('#409EFF')
const color5 = ref('#409EFF')
const color6 = ref('#409EFF')

const predefineColors = ref([
  '#409EFF',
  '#1989FA',
  '#F56C6C',
  '#E6A23C',
  '#67C23A',
  '#909399'
])
</script>

代码解释

1. 基本用法:

   • 使用 el-color-picker 组件并设置 v-model 绑定颜色值。

   • <el-color-picker v-model="color1"></el-color-picker>
     

2. 禁用:

   • 使用 disabled 属性禁用颜色选择器。

   • <el-color-picker v-model="color2" disabled></el-color-picker>
     

3. 显示透明度选择:

   • 使用 show-alpha 属性显示透明度选择。

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

4. 预定义颜色:

   • 使用 predefine 属性设置预定义的颜色列表。

   • <el-color-picker v-model="color4" :predefine="predefineColors"></el-color-picker>
     

5. 自定义颜色格式:

   • 使用 color-format 属性设置颜色格式。

   • <el-color-picker v-model="color5" color-format="hex"></el-color-picker>
     

6. 自定义触发元素:

   • 使用默认插槽自定义颜色选择器的触发元素。

   • <el-color-picker v-model="color6">
       <template #default>
         <span :style="{ background: color6 }" class="custom-trigger"></span>
       </template>
     </el-color-picker>