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
总结
整体用下拉感觉是有很方便,不需要多少配置