最近遇到emoji显示问题, 最终使用emojify.js库解决, github: emojify.js.
安装
npm install emojify.js --save
或者
yarn add emojify.js
介绍
emojify.js原理就是将字符串中的特殊字符转换为span或者div或者img
引用
单独写个ts文件, 做一些配置
// /utils/emojify.ts
import emojify from "emojify.js";
emojify.setConfig({ mode: "data-uri" });
export default emojify;
main.ts 引入样式:
// emoji
import "../node_modules/emojify.js/dist/css/data-uri/emojify.min.css";
使用
页面中:
import emojify from "../../utils/emojify";
// 使用emojify.replace来转换带有emoji标识的字符串
const emojifyMsg = computed(() => {
return emojify.replace(':rage:');
});
emoji字符串对照: https://www.webfx.com/tools/emoji-cheat-sheet/
由于设置了mode: “data-uri”, emojify.replace字符串会转换为一个带类名的标签(字符串), 经过v-html转换后,得到以下DOM元素:
再做一些样式上的调整, 这里我直接在App.vue中覆盖了原有的.emoji以符合项目要求.
以上!