一个值得收藏的Vue表情包组件

V-Emoji-Picker 一个小清新组件

话不多说，先来看看效果图

安装

yarn add v-emoji-picker

用法

<template>
  <div id="app">
    <VEmojiPicker :pack="pack" @select="selectEmoji" />
  </div>
</template>

<script>
import VEmojiPicker from 'v-emoji-picker';
import packData from 'v-emoji-picker/data/emojis.json';

export default {
  name: 'Demo',
  components: {
    VEmojiPicker
  },
  data: () => ({
    pack: packData
  }),
  methods: {
    selectEmoji(emoji) {
      console.log(emoji)
    }
  }
}
</script>

Props

{
  pack: { type: Array, required: true },
  labelSearch: { type: String, default: 'Pesquisar...' },
  showCategory: { type: Boolean, default: true },
  emojisByRow: { type: Number, default: 5}
}

Event

{
  select: 'Emit event on Selected Emoji',
  changeCategory: 'Emit event on Change Category'
}

Estructure Emoji

总结

整体用下拉感觉是有很方便，不需要多少配置