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>
项目使用的是renrenfast2.0 框架，后台springboot，前端vue+element-ui。项目本身有shiro拦截机制，需要放开static路径下文件，才可以访问。
