Vue3 使用emoji表情包 emoji-mart-vue-fast

RyzenVega

已于 2024-07-17 14:12:23 修改

阅读量284

点赞数 4

文章标签： vue.js 前端 javascript

于 2024-07-15 18:08:10 首次发布

本文链接：https://blog.csdn.net/weixin_46607967/article/details/140445593

版权

文档：emoji-mart-vue-fast - npm (npmjs.com)

示例

使用了框架的 ipt 和弹出层实现聊天框输入的效果

非常简单代码直接照抄即可

1. 引入

pnpm install emoji-mart-vue-fast

2. 使用

<template>
    <Picker
        :data="emojiIndex"
        :emojiSize="18"
        :showPreview="false"
        :infiniteScroll="false"
        :i18n="emojiI18n"
        set="apple"
        @select="handleEmoji"
    />
<template>


<script setup>
// all emoji sets.
import data from 'emoji-mart-vue-fast/data/all.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'

// 定义i18n
const emojiI18n = {
  search: '搜索',
  notfound: 'No Emoji Found',
  categories: {
    search: '搜索结果',
    recent: '经常使用',
    smileys: '表情与情感',
    people: '人物与身体',
    nature: '动物与自然',
    foods: '食物与饮料',
    activity: '活动',
    places: '旅行与地理',
    objects: '物品',
    symbols: '符号标志',
    flags: '旗帜',
    custom: 'Custom',
    joy: '哭笑'
  }
}
const emojiIndex = new EmojiIndex(data)
// 选中emoji
const handleEmoji = (e) => {
  console.log(e)
}
</script>