插件名称 | V-Emoji-Picker |
---|---|
版本号 | v2.3.3 |
发布时间 | 2020年5月24日 |
插件作者 | joaoeudes7 |
一个简单的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");
{
@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
在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"
}
}