前端使用emoji表情

最近遇到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以符合项目要求.

以上!