BizEmojiSelect 表情选择

表情选择器：触发框 + 分组面板——分类页签（笑脸 / 手势 / 动物 / 食物 / 活动 / 物品 / 符号 / 旗帜，内置约 360 个高频 emoji）、关键字检索（名称 / 中文关键词）、最近使用（localStorage 持久化）、选中回填字符与名称。评论、反馈、客服会话的表情快捷插入。

基础用法

当前选中：（无）

点击触发框展开分组面板，选页签浏览或搜索后点选插入。

<script setup lang="ts">
/** 场景：基础——分组页签浏览选表情 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'

const emoji = ref('')
</script>

<template>
  <div>
    <BizEmojiSelect v-model="emoji" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      当前选中：{{ emoji === '' ? '（无）' : `${emoji}（字符可直接拼进评论文本）` }}
    </p>
  </div>
</template>

显示代码

最近使用

最近使用记录保存在 localStorage，刷新页面仍在

选中过的表情自动进入「最近使用」区（localStorage 持久化，跨会话保留）。

<script setup lang="ts">
/** 场景：最近使用——localStorage 持久化 + expose clearRecent */
import { ref } from 'vue'
import { ElButton } from 'element-plus'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'
import type { BizEmojiSelectInstance } from 'vue3-ep-biz-lib'

const emoji = ref('')
const refEl = ref<BizEmojiSelectInstance | null>(null)
</script>

<template>
  <div>
    <BizEmojiSelect ref="refEl" v-model="emoji" />
    <div style="margin-top: 10px; display: flex; gap: 8px; align-items: center">
      <ElButton size="small" @click="refEl?.clearRecent()">清空最近使用</ElButton>
      <span style="font-size: 12px; color: var(--el-text-color-secondary)">
        最近使用记录保存在 localStorage，刷新页面仍在
      </span>
    </div>
  </div>
</template>

显示代码

检索

打开面板后试试搜索「庆祝」「火」「加油」——命中 emoji 名称与内置中文关键词

输入名称或关键词（如「笑」「庆祝」「火」）跨全部分组检索。

<script setup lang="ts">
/** 场景：检索——名称 / 中文关键词跨分组匹配 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'

const emoji = ref('')
</script>

<template>
  <div>
    <BizEmojiSelect v-model="emoji" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      打开面板后试试搜索「庆祝」「火」「加油」——命中 emoji 名称与内置中文关键词
    </p>
  </div>
</template>

显示代码

自定义分组

groups 传入业务自定义分组（如客服常用语配套表情），完全替换内置数据。

<script setup lang="ts">
/** 场景：自定义分组——业务常用表情完全替换内置数据 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'
import type { BizEmojiGroup } from 'vue3-ep-biz-lib'

const emoji = ref('')

const groups: BizEmojiGroup[] = [
  {
    key: 'cs',
    name: '客服常用',
    emojis: [
      { char: '🙏', name: '感谢', keywords: '谢谢' },
      { char: '😊', name: '为您服务', keywords: '乐意' },
      { char: '😭', name: '抱歉', keywords: '对不起 不好意思' },
      { char: '🤝', name: '合作愉快', keywords: '成交' },
      { char: '⏳', name: '请稍等', keywords: '等待 处理中' },
      { char: '✅', name: '已解决', keywords: '完成 搞定' },
    ],
  },
  {
    key: 'review',
    name: '评审表态',
    emojis: [
      { char: '👍', name: '赞同', keywords: '通过 同意' },
      { char: '👎', name: '反对', keywords: '不同意' },
      { char: '🤔', name: '待定', keywords: '再想想' },
      { char: '🎉', name: '祝贺', keywords: '通过啦' },
    ],
  },
]
</script>

<template>
  <BizEmojiSelect v-model="emoji" :groups="groups" recent-key="demo-emoji-cs" />
</template>

显示代码

事件

最近一次 change：（无）

change 回传完整表情对象（char / name / keywords）。

<script setup lang="ts">
/** 场景：事件——change 回传完整表情对象 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'
import type { BizEmojiItem } from 'vue3-ep-biz-lib'

const emoji = ref('')
const last = ref<BizEmojiItem | null>(null)

const onChange = (item: BizEmojiItem | null): void => {
  last.value = item
}
</script>

<template>
  <div>
    <BizEmojiSelect v-model="emoji" @change="onChange" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      最近一次 change：{{ last === null ? '（无）' : `${last.char} ${last.name}（${last.keywords ?? ''}）` }}
    </p>
  </div>
</template>

显示代码

禁用与清空

disabled 禁用触发框；clearable 显示一键清空角标。

<script setup lang="ts">
/** 场景：禁用与清空角标 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'

const emoji = ref('😀')
</script>

<template>
  <div style="display: flex; gap: 12px; align-items: center">
    <BizEmojiSelect v-model="emoji" disabled />
    <BizEmojiSelect v-model="emoji" clearable />
  </div>
</template>

显示代码

面板尺寸

面板宽 420px（自动多排，每行可容纳 11 个表情）、最大高度 200px，超出滚动

panel-width 加宽面板、max-height 控制弹层内滚动高度。

<script setup lang="ts">
/** 场景：面板尺寸——panelWidth 加宽 + maxHeight 弹层内滚动 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'

const emoji = ref('')
</script>

<template>
  <div>
    <BizEmojiSelect v-model="emoji" :panel-width="420" :max-height="200" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      面板宽 420px（自动多排，每行可容纳 11 个表情）、最大高度 200px，超出滚动
    </p>
  </div>
</template>

显示代码

关闭最近使用

recent-key 置空后「最近使用」区关闭，getRecent() 恒为空：未挂载 条

recent-key 置空串关闭最近使用记录（隐私 / 共享设备场景）。

<script setup lang="ts">
/** 场景：关闭最近使用——recentKey 空串，选中不再记录 */
import { ref } from 'vue'
import { BizEmojiSelect } from 'vue3-ep-biz-lib'
import type { BizEmojiSelectInstance } from 'vue3-ep-biz-lib'

const emoji = ref('')
const refEl = ref<BizEmojiSelectInstance | null>(null)
</script>

<template>
  <div>
    <BizEmojiSelect ref="refEl" v-model="emoji" recent-key="" />
    <p style="margin: 10px 0 0; font-size: 12px; color: var(--el-text-color-secondary)">
      recent-key 置空后「最近使用」区关闭，getRecent() 恒为空：{{ refEl?.getRecent().length ?? '未挂载' }} 条
    </p>
  </div>
</template>

显示代码

Props

属性名	类型	默认值	说明
v-model	string	''	选中的 emoji 字符
groups	BizEmojiGroup[]	内置 8 组	分组数据（key / name / emojis）
searchable	boolean	true	面板顶部搜索框
recent-key	string	'biz-emoji-recent'	最近使用 localStorage key；空串关闭
recent-size	number	16	最近使用保留个数
panel-width	number | string	348	面板宽度
max-height	number | string	320	面板最大高度
placeholder	string	'请选择表情'	触发框占位
disabled	boolean	false	禁用
clearable	boolean	false	显示清空角标

Events

事件名	参数	说明
update:modelValue	(value: string)	选中字符变化
change	(item: BizEmojiItem | null)	选中（含对象）或清空

Slots

插槽名	说明
—	暂无（候选格保持统一渲染）

Expose

名称	类型	说明
open / close	() => void	面板开合控制
getRecent	() => BizEmojiItem[]	取最近使用列表
clearRecent	() => void	清空最近使用记录