1.资料库
vue组件库，有多个emoji相关的组件，根据需要选择一个。
vue组件库地址：
Emoji - Vue.js Examples
我选择的是vue-twemoji-picker
vue组件地址：
A fast plug-n-play Twitter Emoji Picker for Vue
github地址：
GitHub - kevinfaveri/vue-twemoji-picker: Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.
vue-twemoji-picker组件官网地址：
Vue Twemoji Picker
2.使用概述
2.1安装组件
npm install @kevinfaguiar/vue-twemoji-picker // OR yarn add @kevinfaguiar/vue-twemoji-picker
2.2引入使用
引入的{lang}要在本地定义语言包的种类。这个是官网给出的简单例子。
<template> <twemoji-textarea :emojiData="emojiDataAll" :emojiGroups="emojiGroups" @enterKey="onEnterKey"> </twemoji-textarea> </template> <script> import { TwemojiTextarea } from '@kevinfaguiar/vue-twemoji-picker'; import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-all-groups.json'; import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json'; export default { name: 'App', components: { 'twemoji-textarea': TwemojiTextarea }, computed: { emojiDataAll() { return EmojiAllData; }, emojiGroups() { return EmojiGroups; } }, methods: { onEnterKey(e) { console.log("ClickedEnter", e); } } } </script>
