@composy/emoji-picker-vue

@composy/emoji-picker-vue

Vue 3 适配包，提供 EmojiPicker、EmojiButton、composables 和插件。

使用

<script setup lang="ts">
import { EmojiPicker } from '@composy/emoji-picker-vue'
import '@composy/emoji-picker-vue/index.css'

function onSelect(emoji) {
  console.log(emoji.native)
}
</script>

<template>
  <EmojiPicker :per-line="8" @select="onSelect" />
</template>

EmojiPicker props 对应 Core options（container 和 onSelect 由 Vue 管理），包括 theme、locale、skinTone、perLine、maxRecent、maxFavorites、categories、显示开关、customEmojis、storagePrefix、debug 和 themeTokens。其中 customEmojis 可使用 aliases，customCategories 可覆盖内置分类或增加全新分类；数据热替换后可监听 @data-change。

EmojiButton 提供 theme、perLine 和 placement（top、bottom、left、right），选择后触发 select。

Composables

• useEmojiPicker：在响应式容器挂载后创建并在卸载时销毁 core 实例。
• useRecentEmojis：订阅选择事件并提供 clearRecent()。
• useFavoriteEmojis：订阅收藏事件并提供切换、查询和 clearFavorites()。
• useEmojiSearch：同步搜索结果，clearSearch() 会退出 core 搜索状态。

样式与验证

import '@composy/emoji-picker-vue/index.css'

corepack pnpm run type-check
corepack pnpm run lint:check
corepack pnpm run test:run
corepack pnpm run build

The authoritative configs are .ldesign/builder.config.ts, .ldesign/tsconfig.json, .ldesign/tsconfig.cjs.json, and .ldesign/eslint.config.js. Package-root tsconfig*.json and eslint.config.js remain compatibility entry points. The Vue package keeps its CSS exports aligned with the files emitted by the @composy/builder rolldown build.