vue项目——表情选择器

组件库地址：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、使用

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

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

如图：

第一种情况只需要添加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;
    }
  }
}

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

表情