BizColorSelect 预设色板选择器

产品化的颜色选择：预设色板网格 + 最近使用（localStorage 记忆）+ 内嵌自定义取色器（el-color-picker）。预设色板缺省在挂载时从当前主题的 Element Plus 主色系（--el-color-*）运行时推导——跟随暗色模式与主题覆盖，也可传 presets 换成业务固定色板。

适用于标签颜色、日历事件配色、主题个性化设置等「从一组预置色里挑一个」的场景；取色需求交给内嵌的自定义色器，不需要时可用 show-custom 关闭。

基础用法

当前颜色：#409eff

v-model 回填 hex；面板含预设网格、最近使用（最多 8 个，跨页面共享）与自定义取色，选中即收起。

<script setup lang="ts">
/** 基础用法：预设色板（随 EP 主题运行时推导）+ 最近使用 + 自定义取色，v-model 回填 hex */
import { ref } from 'vue'
import { BizColorSelect } from 'vue3-ep-biz-lib'

const color = ref('#409eff')
</script>

<template>
  <div style="display: flex; align-items: center; gap: 16px">
    <BizColorSelect v-model="color" />
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">当前颜色：{{ color || '未选择' }}</span>
  </div>
</template>

显示代码

业务预设与关闭记忆

标签色：#67c23a

presets 传入业务固定色板（如品牌 VI 色）；remember 关闭后不再写 localStorage。

<script setup lang="ts">
/** 自定义预设与关闭记忆：presets 换成业务色板；remember=false 不写 localStorage */
import { ref } from 'vue'
import { BizColorSelect } from 'vue3-ep-biz-lib'

const tagColor = ref('#67c23a')
/** 业务标签固定色板（如品牌 VI 色） */
const brandPresets = ['#1f2d3d', '#2f54eb', '#fa8c16', '#13c2c2', '#722ed1', '#eb2f96', '#52c41a', '#f5222d']
</script>

<template>
  <div style="display: flex; align-items: center; gap: 16px">
    <BizColorSelect v-model="tagColor" :presets="brandPresets" :remember="false" />
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">标签色：{{ tagColor || '未选择' }}</span>
  </div>
</template>

显示代码

日历事件配色

未选色 09:00 需求评审 14:00 版本发布窗口

选色即生效的轻量场景：size="small" 紧凑展示，未选时为空态灰块，clearable 清空后回到未选。

<script setup lang="ts">
/** 应用场景：日历事件配色——选中色即生效，可清空 */
import { ref } from 'vue'
import { BizColorSelect } from 'vue3-ep-biz-lib'

const eventColor = ref('')
const events = [
  { name: '09:00 需求评审', color: '#409eff' },
  { name: '14:00 版本发布窗口', color: '#e6a23c' },
]
</script>

<template>
  <div style="display: flex; align-items: center; gap: 16px">
    <BizColorSelect v-model="eventColor" size="small" />
    <span
      v-if="eventColor"
      :style="{ display: 'inline-flex', alignItems: 'center', gap: '6px', padding: '4px 10px', borderRadius: '4px', backgroundColor: eventColor + '1a', color: eventColor, fontSize: '13px' }"
    >
      <span :style="{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: eventColor }" />
      自定义日程（{{ eventColor }}）
    </span>
    <span v-else style="font-size: 13px; color: var(--el-text-color-secondary)">未选色</span>
    <span style="display: inline-flex; gap: 8px; margin-left: 12px">
      <span v-for="event in events" :key="event.name" style="display: inline-flex; align-items: center; gap: 6px; font-size: 13px">
        <span :style="{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: event.color }" />
        {{ event.name }}
      </span>
    </span>
  </div>
</template>

显示代码

尺寸与状态

small / default / large / 禁用

size 三档对比；disabled 禁用态（触发器置灰、面板不弹出）。

<script setup lang="ts">
/** 尺寸与状态：small / default / large 三档对比，第三个为禁用态 */
import { BizColorSelect } from 'vue3-ep-biz-lib'
</script>

<template>
  <div style="display: flex; align-items: center; gap: 24px; flex-wrap: wrap">
    <BizColorSelect model-value="#409eff" size="small" />
    <BizColorSelect model-value="#67c23a" />
    <BizColorSelect model-value="#e6a23c" size="large" />
    <BizColorSelect model-value="#909399" disabled />
    <span style="font-size: 12px; color: var(--el-text-color-secondary)">small / default / large / 禁用</span>
  </div>
</template>

显示代码

标签管理

紧急 重要 常规

名称 + 颜色新增标签：chips 回显色点，选中色即时生效（业务侧重在展示选中结果）。

<script setup lang="ts">
/** 标签管理：名称 + 颜色新增标签，chips 回显色点即时生效 */
import { ref } from 'vue'
import { ElButton, ElInput } from 'element-plus'
import { BizColorSelect } from 'vue3-ep-biz-lib'

interface TagItem {
  name: string
  color: string
}

const tags = ref<TagItem[]>([
  { name: '紧急', color: '#f56c6c' },
  { name: '重要', color: '#e6a23c' },
  { name: '常规', color: '#409eff' },
])

const name = ref('')
const color = ref('#67c23a')

const add = (): void => {
  const trimmed = name.value.trim()
  if (trimmed === '') return
  tags.value.push({ name: trimmed, color: color.value })
  name.value = ''
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 14px; max-width: 420px">
    <div style="display: flex; gap: 8px; align-items: center">
      <ElInput v-model="name" placeholder="标签名称" style="width: 160px" maxlength="8" />
      <BizColorSelect v-model="color" />
      <ElButton type="primary" @click="add">新增</ElButton>
    </div>

    <div style="display: flex; gap: 8px; flex-wrap: wrap">
      <span
        v-for="tag in tags"
        :key="tag.name"
        :style="{
          display: 'inline-flex',
          alignItems: 'center',
          gap: '6px',
          padding: '3px 10px',
          borderRadius: '4px',
          fontSize: '13px',
          backgroundColor: tag.color + '1a',
          color: tag.color,
        }"
      >
        <span :style="{ width: '8px', height: '8px', borderRadius: '50%', backgroundColor: tag.color }" />
        {{ tag.name }}
      </span>
    </div>
  </div>
</template>

显示代码

表单集成与必选校验

名称

标识色

作为表单项使用：自定义 validator 校验非空，提交时未选色在表单项下提示。

<script setup lang="ts">
/** 表单集成：作为表单项的必选校验——未选色提交时在表单项下提示 */
import { reactive, ref } from 'vue'
import type { FormInstance, FormItemRule } from 'element-plus'
import { ElButton, ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import { BizColorSelect } from 'vue3-ep-biz-lib'

const formRef = ref<FormInstance>()

const form = reactive({
  title: '版本发布窗口',
  color: '',
})

const rules: Record<string, FormItemRule[]> = {
  title: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  color: [
    {
      required: true,
      validator: (_rule, value: string, callback: (error?: Error) => void) => {
        if (value === '') callback(new Error('请选择颜色'))
        else callback()
      },
      trigger: 'change',
    },
  ],
}

const onSave = (): void => {
  formRef.value
    ?.validate()
    .then(() => {
      ElMessage.success(`保存成功：${form.title} / ${form.color}`)
    })
    .catch(() => {
      /* 校验失败信息就地展示 */
    })
}
</script>

<template>
  <ElForm ref="formRef" :model="form" :rules="rules" label-width="80px" style="max-width: 380px">
    <ElFormItem label="名称" prop="title">
      <ElInput v-model="form.title" maxlength="20" />
    </ElFormItem>
    <ElFormItem label="标识色" prop="color">
      <BizColorSelect v-model="form.color" />
    </ElFormItem>
    <ElFormItem>
      <ElButton type="primary" @click="onSave">保存</ElButton>
    </ElFormItem>
  </ElForm>
</template>

显示代码

Props

属性名	类型	默认值	说明
model-value / v-model	string	''	选中颜色（hex），空字符串为未选
presets	string[]	主题推导	预设色板；缺省从当前主题 --el-color-* 运行时推导（跟随主题覆盖）
show-custom	boolean	true	是否显示自定义取色器（内嵌 el-color-picker，预设同步为其 predefine）
remember	boolean	true	是否记录最近使用（localStorage biz-color-select:recent，最多 8 个）
size	'small' | 'default' | 'large'	'default'	尺寸
disabled	boolean	false	是否禁用
clearable	boolean	true	是否可清空（面板内显示清空按钮）

Events

事件名	参数	说明
change	(color: string)	选色或清空后触发（空字符串为清空）
update:model-value	(color: string)	v-model 更新

Expose

属性/方法	说明
open / close	打开 / 收起选色面板
recentList	最近使用颜色列表（只读快照用途）