插件名称 | vue-emoji-picker |
---|---|
发布时间 | 2020年9月4日 |
插件作者 | DCzajkowski |
一个简单但可高度自定义的Vue 2表情符号选择器。
# NPM
$ npm install vue-emoji-picker --save
vue-emoji-picker是基于插槽的组件,可提供最大的灵活性。由于每一盎司的html是由使用者(即您)创建的,因此您可以根据需要自定义组件的每一部分。
您将需要两件事。一个文本区域(或输入),其中将插入表情符号,以及一个组件声明。下面提供了一个简单的示例。
<textarea v-model="input"></textarea>
<emoji-picker @emoji="insert" :search="search">
<div slot="emoji-invoker" slot-scope="{ events: { click: clickEvent } }" @click.stop="clickEvent">
<button type="button">open</button>
</div>
<div slot="emoji-picker" slot-scope="{ emojis, insert, display }">
<div>
<div>
<input type="text" v-model="search">
</div>
<div>
<div v-for="(emojiGroup, category) in emojis" :key="category">
<h5>{{ category }}</h5>
<div>
<span
v-for="(emoji, emojiName) in emojiGroup"
:key="emojiName"
@click="insert(emoji)"
:title="emojiName"
>{{ emoji }}</span>
</div>
</div>
</div>
</div>
</div>
</emoji-picker>
{
data() {
return {
input: '',
search: '',
}
},
methods: {
insert(emoji) {
this.input += emoji
},
},
}
官网:https://github.com/DCzajkowski/vue-emoji-picker
演示:https://www.vue365.cn/code_demo.php?id=2050
GitHub下载:https://github.com/DCzajkowski/vue-emoji-picker/archive/master.zip