1.资料库
vue组件库,有多个emoji相关的组件,根据需要选择一个。
vue组件库地址:
我选择的是vue-twemoji-picker
vue组件地址:
A fast plug-n-play Twitter Emoji Picker for Vue
github地址:
vue-twemoji-picker组件官网地址:
2.使用概述
2.1安装组件
npm install @kevinfaguiar/vue-twemoji-picker
// OR
yarn add @kevinfaguiar/vue-twemoji-picker
2.2引入使用
引入的{lang}要在本地定义语言包的种类。这个是官网给出的简单例子。
<template>
<twemoji-textarea
:emojiData="emojiDataAll"
:emojiGroups="emojiGroups"
@enterKey="onEnterKey">
</twemoji-textarea>
</template>
<script>
import {
TwemojiTextarea
} from '@kevinfaguiar/vue-twemoji-picker';
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/{LANG}/emoji-all-groups.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
export default {
name: 'App',
components: {
'twemoji-textarea': TwemojiTextarea
},
computed: {
emojiDataAll() {
return EmojiAllData;
},
emojiGroups() {
return EmojiGroups;
}
},
methods: {
onEnterKey(e) {
console.log("ClickedEnter", e);
}
}
}
</script>
正式项目中使用,还需要一些事件和属性的定义,demo如下:
<template>
twemoji-textarea
ref="twemoji"
placeholder="请输入文本内容"
initialContent='initialContent'
@contentChanged="contentChanged"
:textareaDisabled="!canEdit"
:emojiPickerDisabled="!canEdit"
:emojiData="emojiDataAll"
:emojiGroups="emojiGroups"
@enterKey="onEnterKey">
</twemoji-textarea></template>
<script>
import {
TwemojiTextarea
} from '@kevinfaguiar/vue-twemoji-picker';
import EmojiAllData from '@kevinfaguiar/vue-twemoji-picker/emoji-data/zh/emoji-all-groups.json';
import EmojiGroups from '@kevinfaguiar/vue-twemoji-picker/emoji-data/emoji-groups.json';
xport default {
name: 'App',
data () {
initialContent:'初始化值'
},
components: {
'twemoji-textarea': TwemojiTextarea
},
computed: {
emojiDataAll() {
return EmojiAllData;
},
emojiGroups() {
return EmojiGroups;
}
},
methods: {
onEnterKey(e) {
console.log("ClickedEnter", e);
},
//输入框内容改变触发的事件,val返回最新数值
contentChanged(val) {
console.log(val)
this.detailForm.momentContent = val
},
//清空内容
clear(){
this.$refs.twemoji.cleanText()
},
//给文本域赋值,例如接口返回数据赋值
addText(){
this.$refs.twemoji.addText('最新的数据显示')
}
}
}
</script>
3.部分API,Props
3.1 initialContent
type:string
This prop indicates the initial value of the textarea.
定义文本域的初始值。
3.2 enableSendBtn
type:boolean
The value of this prop represents whether the send button is enabled.
是否显示发送按钮,
3.3 emojiPickerDisabled
type:boolean
The value of this prop represents whether the emoji picker is enabled.
表情选择器是否可编辑
3.4 textareaDisabled
type:boolean
The value of this prop represents whether the textarea is enabled.
文本域是否可以编辑
3.5 placeholder
type:string
Define the textarea placeholder.
文本域的输入提示
3.6 maxlength
type:number
Define the textarea maxlength. If set to null has no default maxlength. If set to any number the textarea will automatically expand itself to show a character count.
设置文本域的最大字符串。
4 API,event
4.1 contentChanged(content)
conten,string类型,文本域内容改变的时候触发,content字符串类型,返回最新的文本域数值。
4.2 enterKey(event)
按下回车键的时候触发
5 Ref Useful Methods
5.1 addText(content)
content参数,string类型。
This method adds a text to the textarea. The text parameter will then be sanitized and emojis Unicodes converted to emoji IMG arts from Twemoji.
将文本添加到文本区域,包括表情符号也正常显示。
5.2 cleanText()
This method cleans the textarea.
清空文本域内容
最后效果图: