ChatEmojiPicker

在触发按钮上打开一个弹出层，用短名过滤表情，方向键在 8 列网格里移动焦点。选中后发出 select，弹出层关闭，焦点回到触发按钮。

这个组件属于 @astryx-vue/lab，只通过 canary 标签发布。

导入

import { ChatEmojiPicker, DEFAULT_CHAT_EMOJIS } from '@astryx-vue/lab'

DEFAULT_CHAT_EMOJIS 是内置的 16 个常用回应。传入 emojis 可以换成自己的一组。

属性

名称	类型	默认值	说明
emojis	readonly { emoji: string; name: string }[]	DEFAULT_CHAT_EMOJIS	网格中的表情。name 用于过滤和按钮的无障碍名。
label	string	'Pick an emoji'	弹出层对话框的无障碍名。
searchLabel	string	文案键 @astryx.emojiPicker.searchLabel	过滤框的占位符和隐藏标签。

事件

名称	参数	说明
select	emoji: string	选中的表情。弹出层随后关闭，过滤词清空。

插槽

默认插槽是触发内容，里面要有一个 <button>。弹出层会把点击和 aria-expanded 接到这个按钮上。

过滤框、网格标题和“没有匹配”的句子走 @astryx.emojiPicker.*。若需要按 CLDR 分组的完整选择器（常用表情、关键词搜索和预览栏），请使用 EmojiPicker，不要把这个聊天选择器改名充数。