表情符号 unicode
高度可定制的Vue 2表情符号选择器 (Highly-customizable emoji picker for Vue 2)
Very simple, yet powerful, vue emoji picke.
非常简单但功能强大的Vue表情符号选择器。
安装 (Installation)
与npm (With npm)
npm i vue-emoji-picker --save
带有CDN (With a CDN)
<script src="https://unpkg.com/vue-emoji-picker/dist/vue-emoji-picker.js"></script>
进口 (Import)
使用ES6捆绑器(通过npm) (With an ES6 bundler (via npm))
每个组件的使用 (Use per component)
import EmojiPicker from 'vue-emoji-picker'
export default {
// ...
components: {
EmojiPicker,
},
// ...
}
全球使用 (Use globally)
import { EmojiPickerPlugin } from 'vue-emoji-picker'
Vue.use(EmojiPickerPlugin)
使用CDN (Using a CDN)
<script>
Vue.use(EmojiPicker)
new Vue({
// ...
})
</script>
用法 (Usage)
vue-emoji-picker is a slot-based component, to provide maximum flexibility. Since every ounce of html is created by a consumer (ie. you), you can customize every piece of the component as you wish.
vue-emoji-picker是基于插槽的组件,以提供最大的灵活性。 由于每一盎司的html是由使用者(即您)创建的,因此您可以根据需要自定义组件的每一部分。
使用非常简单,没有定义任何CSS (Very simple usage, without any CSS defined)
You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.
您将需要两件事。 一个文本区域(或输入),其中将插入表情符号,以及一个组件声明。 下面提供了一个简单的示例。
<textarea v-model="input"></textarea>
<emoji-picker @emoji="insert" :search="search">
<div class="emoji-invoker" slot="emoji-invoker" slot-scope="{ events }" v-on="events">
<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">
<h5>{{ category }}</h5>
<div>
<span
v-for="(emoji, emojiName) in emojiGroup"
@click="insert(emoji)"
:title="emojiName"
>{{ emoji }}</span>
</div>
</div>
</div>
</div>
</div>
</emoji-picker>
{
data() {
return {
input: '',
search: '',
}
},
methods: {
insert(emoji) {
this.input += emoji
},
},
}
As you may see, you have to declare some things yourself. Namely:
如您所见,您必须自己声明一些内容。 即:
input
- a model for your input/textarea,input
-输入/文本区域的模型,search
- a model for the search box inside the component (optional),search
组件内部搜索框的模型(可选),insert(emoji)
- a method responsible to put emojis into your input/textarea. Providedemoji
is a string representation of the emoji to be inserted.insert(emoji)
-一种负责insert(emoji)
放入您的输入/文本区域的方法。 提供的emoji
是要插入的表情符号的字符串表示形式。
CSS样式的示例 (CSS-styled example)
To see what is possible with the component, you can simply have a look at a demo available here.
要了解该组件可能提供的功能,您只需在此处查看一个演示即可。
可用道具 (Available props)
search
optional - If you are not using the search functionality, you can omit this one. It should be a model of the search passed from yourdata
.search
可选 -如果您不使用搜索功能,则可以忽略此功能。 它应该是从您的data
传递的搜索的模型。emojiTable
optional - You can overwrite the default emoji table by providing your own.emojiTable
可选 -您可以通过提供自己的覆盖emoji表的默认值 。
插槽 (Slots)
emoji-invoker
emoji-invoker
events
- delares theevents
-删除v-on:click
toggle of the picker box,v-on:click
选择器框的切换,
emoji-picker
emoji-picker
emojis
- object of unicode emojis,emojis
对象,insert()
- method to be invoked when an emoji is clicked,insert()
-单击表情符号时要调用的方法,display
- object containtingdisplay
-对象containtingx
,x
,y
andy
和visible
properties.visible
性。
翻译自: https://vuejsexamples.com/highly-customizable-unicode-emoji-picker/
表情符号 unicode