ColorPicker 颜色选择器

基于 ElColorPicker 封装，提供预设色板和自定义颜色选择。

基础用法

<template>
  <div>
    {{ color }}
    <MColorPicker v-model="color" :options="colorOptions"></MColorPicker>

    <MMarkdownView :value="readme"></MMarkdownView>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import readme from '@/components/colorPicker/README.md?raw'

const color = ref('#1890FF')
const colorOptions = [
  {
    label: '山雾',
    value: '#ededed'
  },
  {
    label: '山雾',
    value: '#ededed'
  },
  {
    label: '薄暮',
    name: 'dust-red',
    value: '#f5222d'
  },
  {
    label: '金盏花',
    value: '#faad14'
  },
  {
    label: '极光绿',
    value: '#52C41A'
  },
  {
    label: '明青',
    value: '#13C2C2'
  },
  {
    label: '拂晓蓝',
    value: '#1890FF'
  },
  {
    label: '酱紫',
    value: '#722ED1'
  },
  {
    label: '绿松石',
    value: '#1abc9c'
  },
  {
    label: '翠',
    value: '#2ecc71'
  },
  {
    label: '河流',
    value: '#3498db'
  },
  {
    label: '紫晶',
    value: '#9b59b6'
  },
  {
    label: '湿沥青',
    value: '#34495e'
  },
  {
    label: '粉红魅力',
    value: '#ff7979'
  }
]
</script>

<style lang="scss" scoped></style>

ColorPicker API

ColorPicker 属性

属性名	说明	类型	默认值
modelValue	v-model 颜色值	string	—
options	预设颜色选项	ColorPickerOptionsItem[]	[]
custom	显示自定义颜色选择器	boolean	true

ColorPickerOptionsItem

TIP

会根据 options.value 自动去重。

属性名	说明	类型	默认值
label	颜色说明（鼠标悬浮显示）	string	—
value	颜色值	string	—

ColorPicker 事件

事件名	说明	类型
change	选择颜色时触发	(color?: string) => void

ColorPickerAppTheme API

用于更换主题色的特殊版本，会同步更新 CSS 变量和 Pinia Store。

ColorPickerAppTheme 属性

属性名	说明	类型	默认值
cssKey	执行 style.setProperty 的 CSS 变量名	string	—
appSettingKey	设置 appSetting[appSettingKey] 的值	string	—
options	预设颜色	ColorPickerOptionsItem[]	内置色板