简洁好使用的emoji表情组件在vue2中的使用

这次介绍的emoji表情组件是 vue-emoji-picker，具体使用案例如下图：

为什么我会找到这么一个表情选择器呢，因为我个人最近在开发一个个人博客，里面有个评论功能需要使用的emoji表情来丰富评论内容，营造更好的良性互动。

话不多说，接下来看怎么使用。

首先呢，要先导入对应的依赖

使用npm

npm install vue-emoji-mart@next

或者使用yarn

yarn add vue-emoji-mart@next

第二步，在你封装的组件内导入,这三个必不可少，还要记得他也是一个封装好的组件，要声明一下

import { VEmojiPicker, emojisDefault, categoriesDefault } from 'v-emoji-picker'


components: {
    VEmojiPicker
  },

第三步，在模板内使用，可以通过:style设置一些属性，通过@select调用emoji组件方法传递表情数据，在我们这个父组件中可以把他添加到评论内容里去

<VEmojiPicker
        v-show="showDialog"
        :style="{ width: '100%', height: '200' }"
        labelSearch="Search"
        lang="pt-BR"
        @select="selectEmoji"></VEmojiPicker>

 // 将v-emoji-picker中选择的表情添加到评论内容中
    selectEmoji(emoji) {
      this.newComment.content += emoji.data;
      console.log(emoji)
    },

然后就能得到我们想要的效果了

这里是官方提供的一个vue使用模板的网址 https://codesandbox.io/s/vue-example-emoji-picker-2-746pq?from=madewith.cn&file=/src/components/Demo.vue