一个简单的Vue.js表情符号选择器，它使用本机表情符号。

变更日志：

v2.3.3（01/25/2021）

• 错误修正

v2.3.1（10/17/2020）

• 更新

v2.3.0（07/26/2020）

• 添加了黑暗主题

v2.2.0（07/24/2020）

• 重构

下载安装

yarn add v-emoji-picker

使用

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

<script>
import VEmojiPicker from 'v-emoji-picker';

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

或全局

import Vue from "vue";
import App from "./App.vue";

import VEmojiPicker from 'v-emoji-picker';

Vue.config.productionTip = false;
Vue.use(VEmojiPicker);

new Vue({
  render: h => h(App)
}).$mount("#app");

Props

{

  @Prop({ default: () => [] }) customEmojis!: IEmoji[];
  @Prop({ default: () => [] }) customCategories!: ICategory[];
  @Prop({ default: 15 }) limitFrequently!: number;
  @Prop({ default: 5 }) emojisByRow!: number;
  @Prop({ default: false }) continuousList!: boolean;
  @Prop({ default: 32 }) emojiSize!: number;
  @Prop({ default: true }) emojiWithBorder!: boolean;
  @Prop({ default: true }) showSearch!: boolean;
  @Prop({ default: true }) showCategories!: boolean;
  @Prop({ default: "Peoples" }) initialCategory!: string;
  @Prop({ default: () => [] as ICategory[] }) exceptCategories!: ICategory[];
  @Prop({ default: () => [] as Emoji[] }) exceptEmojis!: IEmoji[];
  @Prop({}) i18n!: Object;
}

事件

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

使用自定义表情符号

具有的项目数组 Interface IEmoji

interface IEmoji {
  data: string;
  category: string;
  aliases: string[];
}

在Props中设置 customEmojis

使用自定义类别

具有的项目数组 Interface ICategory

interface ICategory {
  name: string;
  icon: string;
}

在Props中设置customCategories

i18n

在Prop中设置i18n一个具有自定义翻译结构的对象：

<VEmojiPicker :i18n="i18n" />

const i18n = {
  search: 'Pesquisar...',
  categories: {
    Activity: "Atividades",
    Flags: "Bandeiras",
    Foods: "Comida",
    Frequently: "Frequentes",
    Objects: "Objetos",
    Nature: "Natureza",
    Peoples: "Pessoas",
    Symbols: "Símbolos",
    Places: "Locais"
  }
}