（已解决）emoji及其特殊符号在vue中的使用

BrianGriffin

已于 2024-03-03 20:58:40 修改

阅读量764

点赞数 5

文章标签： vue.js javascript 前端

于 2024-03-03 20:58:18 首次发布

本文链接：https://blog.csdn.net/briangriffin/article/details/136437849

版权

文章讲述了在Vue项目中，由于ESLint规则对Unicode实体的处理，导致表情无法正常显示。通过将Unicode编码转换为JavaScript字符串`string.fromCharCode()`，解决了这个问题并展示了修改后的代码和成功的效果。

摘要由CSDN通过智能技术生成

问题叙述

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

<template>
  <div>
    <!-- 被点击的文字 -->
    <p @click="copyToClipboard('&#8986;')">点击我，将我复制到剪贴板</p>

    <!-- 输入框，这里仅为演示，实际中可能不需要显示出来 -->
    <input
      type="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>
    <input
      type="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>

运行效果：