插件名称 | emoji-mart-vue-fast |
---|---|
版本号 | 9.1.2 |
发布时间 | 2021年4月30日 |
插件作者 | serebrov |
一个多合一的表情符号选择器组件,支持本机,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',
},