Fluent Emoji MS

Vue 3 组件库，用于在应用中集成微软 Fluent UI 表情符号。

特性

• 🎨 支持多种风格：现代风格、扁平风格和高对比度风格
• 🔍 搜索表情符号功能
• 📂 按分类浏览表情符号
• 📱 响应式设计，适配不同屏幕尺寸
• ⚙️ 高度可定制的界面
• 🧩 支持表情符号分类排序
• 🔄 自动处理图片加载错误

安装

npm install fluent-emoji-ms

基本使用

<script setup>
import { ref } from 'vue'
import { FluentEmojiPicker } from 'fluent-emoji-ms'

const selectedEmoji = ref(null)

function handleSelectEmoji(emoji) {
  selectedEmoji.value = emoji
  console.log('选中表情:', emoji)
}
</script>

<template>
  <div>
    <FluentEmojiPicker @select="handleSelectEmoji" />
    
    <div v-if="selectedEmoji">
      选中的表情: {{ selectedEmoji.name }}
    </div>
  </div>
</template>

开发

本项目同时支持作为组件库发布和部署示例网站。

安装依赖

npm install

开发模式

npm run dev

构建

# 构建组件库和示例网站
npm run build

# 只构建组件库
npm run build:lib

# 只构建示例网站
npm run build:web

部署示例网站

# 构建示例网站并部署到GitHub Pages
npm run build:web
node scripts/deploy-gh-pages.js

组件

FluentEmojiPicker

主要组件，提供完整的表情选择器功能。

Props

• CDN
• https://unpkg.com/fluentui-emoji@1.1.1
• https://cdn.jsdelivr.net/npm/fluentui-emoji@1.1.1

https://unpkg.com/fluentui-emoji@1.1.1/icons/flat/smiling-face-with-hearts.svg

Events

EmojiPicker

内部使用的基础表情选择器组件，可用于自定义更复杂的界面。

Props

注意事项

• 确保网络能够访问表情图标 CDN
• 如需自定义 CDN 或使用本地图标，可以配置 baseUrl 属性
• 表情图标加载失败时会尝试使用备用风格

更多示例

查看 examples 文件夹中的示例，获取更多使用场景。

许可证

MIT