1.资料库

vue组件库，有多个emoji相关的组件，根据需要选择一个。

vue组件库地址：

Emoji - Vue.js Examples

我选择的是vue-twemoji-picker

vue组件地址：

A fast plug-n-play Twitter Emoji Picker for Vue

github地址：

GitHub - kevinfaveri/vue-twemoji-picker: Vue Twemoji Picker - A fast plug-n-play Twemoji Picker (+textarea for Twemoji rendering) for Vue. Support Unicode Emoji 13.0.

vue-twemoji-picker组件官网地址：

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.

清空文本域内容

最后效果图：

Vue使用emoji表情包相关推荐

vue 使用emoji表情包
1.前端页面 vue <template><div class="test"><div v-show="show" :class= ...
markdown中快速插入Emoji表情包语法速查表！！！
markdown中快速插入Emoji表情包语法速查表!!!
CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
Emoji-Chat emoji表情包发送及显示兼容web端、移动端
Emoji-Chat emoji表情包发送及显示兼容web端.移动端序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以 ...
js文本内去除emoji表情包
利用正则匹配emoji表情包并且去除 let Arr=['emoji
linux版微信能发表情包的,仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
序言在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以发送表情,还得在web端.微信H5.app端.微信公众号里均可以正常显 ...
php文本框添加表情,仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
仿微信在对话框文字中插入Emoji表情包
场景类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改
介绍最近的项目用到了表情包,咱们以前项目有用到emoji-vue.我就直接拿来用了.使用过程中真的一言难尽啊~~~~~ 先附上一张这个插件在Vue中使用的列子.可以清楚的看到一个比较重要的方法onI ...

Vue使用emoji表情包

1.资料库

2.使用概述

2.1安装组件

2.2引入使用

3.部分API，Props

3.1 initialContent

3.2 enableSendBtn

3.3 emojiPickerDisabled

3.4 textareaDisabled

3.5 placeholder

3.6 maxlength

4 API，event

4.1 contentChanged（content）

4.2 enterKey（event）

5 Ref Useful Methods

5.1 addText(content)

5.2 cleanText（）

Vue使用emoji表情包相关推荐

最新文章

热门文章