问题叙述

使用问题：在表情库中点击后无法展示对应的emoji表情，仅仅显示Unicode代码编号，按照vue eslint规则更改添加分号后，没有报错但是依旧无法正确渲染。
问题源码：

<template><div><!-- 被点击的文字 --><p @click="copyToClipboard('&#8986;')">点击我，将我复制到剪贴板</p><!-- 输入框，这里仅为演示，实际中可能不需要显示出来 --><inputtype="text"v-model="copiedText"ref="input"/></div>
</template><script>
export default {data() {return {copiedText: "",};},methods: {// 复制到剪贴板的方法copyToClipboard(text) {this.copiedText = text;const input = this.$refs.input;input.focus();input.select();document.execCommand("copy");input.blur();},},
};
</script>

问题展示：

---

问题产生原理及解决方法

问题在我直接使用了 Unicode 实体 &#8986，ESLint规则 认为这是一个未正确结束的字符引用。为了解决这个问题，应该使用 string.fromCharCode() 函数将&#8986转换为 JavaScript 字符串。

修改后代码：

<template><div><p @click="copyToClipboard(specialChar)">&#8986;</p><inputtype="text"v-model="copiedText"ref="input"/></div>
</template><script>
export default {data() {return {copiedText: "",specialChar: String.fromCharCode(8986),};},methods: {copyToClipboard(text) {this.copiedText = text;const input = this.$refs.input;input.focus();input.select();document.execCommand("copy");input.blur();},},
};
</script>

运行效果：

 

成功解决