组件库地址：https://www.npmjs.com/package/emoji-mart-vue

1、下载

npm install --save emoji-mart-vue

2、引入

import { Picker } from 'emoji-mart-vue'

export default {
  components: {
    Picker
  }
}

3、使用

<picker set="emojione" />
<picker @select="addEmoji" />
<picker title="Pick your emoji…" emoji="point_up" />
<picker :style="{ position: 'absolute', bottom: '20px', right: '20px' }" />
<picker :i18n="{ search: 'Recherche', categories: { search: 'Résultats de recherche', recent: 'Récents' } }" />

在页面中这样就可以使用啦

【附加】：如果需要鼠标点击表情按钮，表情选择器出来，再次点击表情按钮，表情选择器关闭。另外如果表情选择器出来的情况下，鼠标点击屏幕其他地方，表情选择器关闭。

如图：

第一种情况只需要添加click事件，第二种情况需要安装 v-click-outside 这个库来使用 @click.outside 指令

npm install v-click-outside

引入并使用这个库

import vClickOutside from 'v-click-outside'

export default {
  directives: {
    clickOutside: vClickOutside.directive
  },
  data() {
    return {
      showPicker: false
    }
  },
  methods: {
    toggleEmojione() {
      this.showPicker = !this.showPicker;
    },
    closeEmojione() {
      this.showPicker = false;
    }
  }
}

然后，在你的模板中使用这些事件和指令：

<span 
  class="iconfont icon-biaoqing" 
  @click="toggleEmojione" 
  v-click-outside="closeEmojione"
>表情</span>
<Picker set="emojione" v-if="showPicker" class="my-picker" />