vue project - expression selector

Component library address: https://www.npmjs.com/package/emoji-mart-vue

1. Download

npm install --save emoji-mart-vue

2. Introduction

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

export default {
  components: {
    Picker
  }
}

3. Use

<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' } }" />

You can use it on the page

[Additional]: If you need to click the emoticon button with the mouse, the emoticon selector will come out. Click the emoticon button again and the emoticon selector will close. In addition, if the emoticon selector comes out and the mouse is clicked elsewhere on the screen, the emoticon selector will be closed.

As shown in the picture:

In the first case, you only need to add a click event. In the second case, you need to install  v-click-outside this library to use  @click.outside the command.

npm install v-click-outside

Import and use this library

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;
    }
  }
}

Then, use these events and directives in your templates:

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