Vue3实现Emoji表情的四种方案
作者：李剑一
使用输入法输入表情
Textarea中支持接受输入法输入的表情，在 macOs 中直接输入“微笑”，会直接打印出😊的表情，和文字没区别。
但是这种方案不好的点在于只能手输，没办法达到选择的效果。
使用Unicode编码输入表情
在 Unicode 编码中存在对应表情的编码区间，位于基本多语言面（Basic Multilingual Plane，BMP），码点在 U+1F600 到 U+1F6FF。
因为目前使用的是 textarea 作为输入框，所以 Unicode 编码在输入框显示出来是纯文本，这就导致用户很有可能出现误修改。
另外会话信息的展示区域，现在也是直接使用的模板语法，需要在展示区使用 v-html 才能正常展示表情，否则也是纯文本。
但是基于 Unicode 编码的这种模式非常轻量，并不需要额外的库和特殊操作。
使用自定义内容进行对应
使用自定义内容进行对应，这应该是QQ的表情方案（虽然我没看过源码，纯猜测）。
QQ的输入框在使用 “/” 进行输入的时候会弹出相应的表情提示，确定以后变成表情。这里面大概率是经历了对特定编码的转换。
同理我们也可以用这种方案进行转换，可以使用特定的符号在系统中进行解析，生成表情。
比如系统中写死 “[wx]” 代表是的 😊 ，当输入框通过 input 事件监听到存在 “[wx]” 的时候，代码将其自动转换为 😊。
插个眼，后面把 Unicode 编码通过这种方式实现一下。
使用 emoji-mart-vue 插件
使用插件是性价比最高的方案，这个插件相当于直接把输入的emoji集成了，无需改造原本的代码，插入的emoji表情输入法输入的没有区别。
唯一可能存在的瑕疵可能是没办法自定义。
安装
npm install emoji-mart-vue-fast
使用
<template>
<Picker :data="emojiIndex" :emojiSize="18" :showPreview="false" :infiniteScroll="false" :i18n="emojiI18n"
set="apple" @select="handlerEmoji" />
</template>
<script>
import data from 'emoji-mart-vue-fast/data/all.json';
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src';
export default {
components: { Picker, EmojiIndex },
data() {
return {
editorValue: "",
emojiOpen: false,
emojiI18n: {
search: '搜索',
notfound: 'No Emoji Found',
categories: {
search: '搜索结果',
recent: '经常使用',
smileys: '表情与情感',
people: '人物与身体',
nature: '动物与自然',
foods: '食物与饮料',
activity: '活动',
places: '旅行与地理',
objects: '物品',
symbols: '符号标志',
flags: '旗帜',
custom: 'Custom',
joy: '哭笑'
}
},
}
},
computed: {
emojiIndex() {
return new EmojiIndex(data);
}
},
methods: {
// 选中emoji方法
handlerEmoji(event) {
console.log(event);
},
}
}
</script>
结论
想要自定义可以尝试第三种方案，现成的直接第四种方案。
到此这篇关于Vue3实现Emoji表情的四种方案的文章就介绍到这了,更多相关Vue3实现Emoji表情内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！