一个多合一的表情符号选择器组件，支持本机，Google，Apple，Twitter和Facebook表情符号。适用于Vue 3。

安装和下载：

# NPM
$ npm i emoji-mart-vue-fast

使用：

1.导入表情符号集市组件和表情符号数据。

import data from "emoji-mart-vue-fast/data/all.json";
import "emoji-mart-vue-fast/css/emoji-mart.css";
import { Picker, EmojiIndex } from "emoji-mart-vue-fast";

2.将表情符号选择器添加到模板中。

<template>
  <Picker :data="emojiIndex" set="twitter" @select="showEmoji" />
  <div>
    {{ emojisOutput }}
  </div>
</template>

3.注册表情符号选择器并输出所选的表情符号。

let emojiIndex = new EmojiIndex(data);
export default {
  name: "App",
  components: {
    Picker
  },
  data() {
    return {
      emojiIndex: emojiIndex,
      emojisOutput: ""
    };
  },
  methods: {
    showEmoji(emoji) {
      this.emojisOutput = this.emojisOutput + emoji.native;
    }
  }
};

4.可用的选取器组件。

perLine: {
  type: Number,
  default: 9,
},
maxSearchResults: {
  type: Number,
  default: 75,
},
emojiSize: {
  type: Number,
  default: 24,
},
title: {
  type: String,
  default: 'Emoji Mart™',
},
emoji: {
  type: String,
  default: 'department_store',
},
color: {
  type: String,
  default: '#ae65c5',
},
set: {
  type: String,
  default: 'apple',
},
skin: {
  type: Number,
  default: null,
},
defaultSkin: {
  type: Number,
  default: 1,
},
native: {
  type: Boolean,
  default: false,
},
emojiTooltip: {
  type: Boolean,
  default: false,
},
autoFocus: {
  type: Boolean,
  default: false,
},
i18n: {
  type: Object,
  default() {
    return {}
  },
},
showPreview: {
  type: Boolean,
  default: true,
},
showSearch: {
  type: Boolean,
  default: true,
},
showCategories: {
  type: Boolean,
  default: true,
},
showSkinTones: {
  type: Boolean,
  default: true,
},
infiniteScroll: {
  type: Boolean,
  default: true,
},
pickerStyles: {
  type: Object,
  default() {
    return {}
  },
},

5.可用的表情符号道具。

native: {
  type: Boolean,
  default: false,
},
tooltip: {
  type: Boolean,
  default: false,
},
fallback: {
  type: Function,
},
skin: {
  type: Number,
  default: 1,
},
set: {
  type: String,
  default: 'apple',
},
emoji: {
  type: [String, Object],
  required: true,
},
size: {
  type: Number,
  default: null,
},
tag: {
  type: String,
  default: 'span',
},

---

官网：https://github.com/serebrov/emoji-mart-vue

演示：https://www.vue365.cn/code_demo.php?id=4573

GitHub下载：https://github.com/serebrov/emoji-mart-vue/archive/refs/heads/master.zip