emoji组件

npm install --save emoji-mart-vue-fast
 

template
//输入框
<el-input v-model="emojisOutput" type="textarea" />
//选择表情
<Picker :data="emojiIndex" set="twitter" @select="showEmoji" />

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";
 
const emojiIndex = new EmojiIndex(data)
const emojisOutput = ref('')
const showEmoji = (emoji)=> {
  emojisOutput.value = emojisOutput.value + emoji.native;
}



# template部分增加:i18n="I18N"
<Picker :data="emojiIndex" set="twitter" @select="showEmoji"  :i18n="I18N"/>
 
// script部分定义I18N
const I18N = {
  search: "搜索",
  notfound: "No Emoji Found",
  categories: {
    search: "搜索结果",
    recent: "经常使用",
    smileys: "表情与情感",
    people: "人物与身体",
    nature: "动物与自然",
    foods: "食物与饮料",
    activity: "活动",
    places: "旅行与地理",
    objects: "物品",
    symbols: "符号标志",
    flags: "旗帜",
    custom: "Custom",
    joy: "哭笑",
  },
};