[Enhancement] [color-picker] 支持选择 CSS 变量

[Lionad-Morotar]

Feature type: Enhancement

Details

• Enhanced component name: color-picker

Description

系统中定义了一些颜色值的 CSS 变量，如：--color-1: red。使用 el-color-picker 选择颜色时不容易与这些 CSS 变量交互，需要在 el-color-picker 的基础上二次封装。

是否能内置支持一下与 CSS 颜色变量的交互，如：

• 增加 trap-css-vars 属性，开启后：
  • trap-css-vars 属性允许传入 CSS 变量（变量名及默认值数组，type CssVar = { name: '--color-1', defaultValue: 'red' }），
  • color-format 支持传入数组，并增加 css-variable 枚举项
  • v-model 绑定的值按照 color-format 数组顺序进行格式化，匹配到 css-variable 时，如果 modelValue 与 trap-css-vars 数组项匹配（默认匹配逻辑为 rgba 相等），则返回对应项
  • predefine 属性允许传入 CSS 变量
  • 增加 color-format-check 属性（(a: string | CssVar, b: string | CssVar) => boolean），当 color-format 属性为数组时用于判断是否匹配

Additional comments

(empty)