BizIconSelect 图标选择器

弹窗内展示 @element-plus/icons-vue 全量图标网格（300+），支持名称搜索、分页浏览、选中主题色描边，确认后回填图标组件名到 v-model。常用于菜单管理、动态配置页选择图标。

基础用法

当前绑定值：Bell

点击输入框打开选择弹窗；单击选中、双击快选；清空按钮置空绑定值。

<script setup lang="ts">
/** 基础用法：选择图标（搜索 / 分页 / 双击快选），展示绑定值 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { BizIconSelect } from 'vue3-ep-biz-lib'

const icon = ref('Bell')

const onChange = (name: string | undefined): void => {
  if (name !== undefined) ElMessage.success(`已选择图标：${name}`)
}
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; max-width: 480px">
    <BizIconSelect v-model="icon" style="max-width: 280px" @change="onChange" />
    <span>当前绑定值：{{ icon || '（空）' }}</span>
  </div>
</template>

显示代码

触发器定制与主动唤起

当前图标： Setting

placeholder / size / disabled 等经 attrs 透传触发器 el-input；open() 可编程唤起选择弹窗（常用于「点击图标预览区即打开」的菜单配置场景）。

<script setup lang="ts">
/** 进阶：attrs 定制触发器（占位/禁用）+ open() 主动唤起 + 当前图标实时预览 */
import { ref } from 'vue'
import { ElButton, ElIcon, ElMessage } from 'element-plus'
import { BizIconSelect } from 'vue3-ep-biz-lib'
import type { BizIconSelectInstance } from 'vue3-ep-biz-lib'
import * as Icons from '@element-plus/icons-vue'

const icon = ref<string>('Setting')
const disabled = ref(false)
const selectRef = ref<BizIconSelectInstance>()

const onChange = (name: string | undefined): void => {
  if (name !== undefined) ElMessage.success(`菜单图标已更新为：${name}`)
}
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; flex-wrap: wrap">
    <BizIconSelect
      ref="selectRef"
      v-model="icon"
      :disabled="disabled"
      placeholder="请选择菜单图标"
      size="default"
      style="max-width: 260px"
      @change="onChange"
    />
    <span v-if="icon" style="display: inline-flex; gap: 6px; align-items: center; color: var(--el-text-color-secondary)">
      当前图标：<ElIcon :size="18"><component :is="(Icons as Record<string, unknown>)[icon]" /></ElIcon> {{ icon }}
    </span>
    <ElButton size="small" @click="selectRef?.open()">open() 唤起</ElButton>
    <ElButton size="small" @click="disabled = !disabled">禁用：{{ disabled ? '开' : '关' }}</ElButton>
  </div>
</template>

显示代码

菜单管理配置图标

库存查询

菜单名称

菜单图标

系统配置场景：菜单表单内嵌图标选择器，选中后顶部模拟导航条实时预览「图标 + 菜单名」最终效果，确认保存回填组件名。

<script setup lang="ts">
/** 场景：菜单管理表单——选择图标后顶部导航实时预览 */
import { ref } from 'vue'
import { ElForm, ElFormItem, ElInput, ElMessage } from 'element-plus'
import * as Icons from '@element-plus/icons-vue'
import { BizButton, BizIconSelect } from 'vue3-ep-biz-lib'

const menuName = ref('库存查询')
const icon = ref('Box')

const onSave = (): void => {
  ElMessage.success(`已保存菜单「${menuName.value}」，图标 ${icon.value}`)
}
</script>

<template>
  <div style="max-width: 520px">
    <!-- 实时预览条：模拟系统顶部导航中该菜单项的最终效果 -->
    <div
      style="display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; margin-bottom: 16px; font-size: 14px; color: var(--el-color-primary); background: var(--el-color-primary-light-9); border-radius: 4px"
    >
      <component :is="(Icons as Record<string, unknown>)[icon]" />
      <span>{{ menuName || '（未命名菜单）' }}</span>
    </div>

    <ElForm label-width="90px">
      <ElFormItem label="菜单名称">
        <ElInput v-model="menuName" maxlength="12" placeholder="显示在导航中的名称" />
      </ElFormItem>
      <ElFormItem label="菜单图标">
        <BizIconSelect v-model="icon" dialog-title="选择菜单图标" style="width: 100%" />
      </ElFormItem>
      <ElFormItem>
        <BizButton type="primary" @click="onSave">保存菜单</BizButton>
      </ElFormItem>
    </ElForm>
  </div>
</template>

显示代码

应用门户图标配置

数据大屏

门户场景：选图标 + ElColorPicker 选主题色，左侧卡片实时预览最终效果。

<script setup lang="ts">
/** 场景：应用门户配置——卡片选图标 + 主题色实时预览 */
import { ref } from 'vue'
import * as Icons from '@element-plus/icons-vue'
import { ElColorPicker } from 'element-plus'
import { BizIconSelect } from 'vue3-ep-biz-lib'

const appName = ref('数据大屏')
const icon = ref('Monitor')
const color = ref('#409EFF')
</script>

<template>
  <div style="display: flex; gap: 20px; max-width: 620px">
    <div
      :style="{
        width: 120,
        height: 120,
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        gap: 10,
        borderRadius: 10,
        color,
        border: `1px solid ${color}33`,
        background: `${color}0D`,
      }"
    >
      <component :is="(Icons as Record<string, unknown>)[icon]" :size="30" />
      <span style="font-size: 14px">{{ appName || '应用名' }}</span>
    </div>
    <div style="flex: 1; display: flex; flex-direction: column; gap: 12px">
      <BizIconSelect v-model="icon" dialog-title="选择门户应用图标" />
      <ElColorPicker v-model="color" />
    </div>
  </div>
</template>

显示代码

按钮图标配置

v-model 即图标组件名，可直接交给 :icon

配置场景：所选图标组件名直接交给按钮 :icon 实时预览——v-model 输出与 EP 图标体系无缝衔接。

<script setup lang="ts">
/** 场景：按钮图标配置——所选图标实时挂到按钮上 */
import { ref } from 'vue'
import * as Icons from '@element-plus/icons-vue'
import { ElButton } from 'element-plus'
import { BizIconSelect } from 'vue3-ep-biz-lib'

const icon = ref('Share')
const text = ref('分享')
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; max-width: 560px">
    <BizIconSelect v-model="icon" style="width: 220px" />
    <ElButton type="primary" :icon="(Icons as Record<string, unknown>)[icon] as never">{{ text || '按钮文案' }}</ElButton>
    <span style="font-size: 13px; color: var(--el-text-color-secondary)">v-model 即图标组件名，可直接交给 :icon</span>
  </div>
</template>

显示代码

自定义标签配置

高优先级

标签场景：标签名 + 图标组合，右侧 ElTag 大尺寸实时预览——配置即所见。

<script setup lang="ts">
/** 场景：自定义标签配置——标签名 + 图标组合预览 */
import { ref } from 'vue'
import * as Icons from '@element-plus/icons-vue'
import { ElInput, ElTag } from 'element-plus'
import { BizIconSelect } from 'vue3-ep-biz-lib'

const label = ref('高优先级')
const icon = ref('WarningFilled')
</script>

<template>
  <div style="display: flex; gap: 16px; align-items: center; max-width: 560px">
    <ElInput v-model="label" maxlength="8" style="width: 140px" placeholder="标签名" />
    <BizIconSelect v-model="icon" style="width: 180px" />
    <ElTag type="danger" effect="light" size="large">
      <span style="display: inline-flex; align-items: center; gap: 4px">
        <component :is="(Icons as Record<string, unknown>)[icon]" />
        {{ label || '标签' }}
      </span>
    </ElTag>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	—	选中图标组件名（如 'Plus'）
clearable	boolean	true	可清空
dialog-title	string	'选择图标'	弹窗标题
dialog-width	string	'min(760px, 94vw)'	弹窗宽度（默认加宽，窄屏自适应防溢出）
page-size	number	60	每页图标数

其余 attrs 透传触发器 el-input（placeholder / size / disabled...）。

Events

事件名	参数	说明
update:modelValue	(name)	绑定值变化
change	(name / undefined)	确认选择或清空

Slots

插槽名	说明
—	无自定义插槽（触发器经 attrs 定制）

Expose

属性/方法	说明
open()	主动打开选择弹窗