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

问题叙述

使用问题:在表情库中点击后无法展示对应的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>

运行效果:


 

成功解决

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/427503.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Window系统部署Splunk Enterprise并结合内网穿透实现远程访问本地服务

文章目录 前言1. 搭建Splunk Enterprise2. windows 安装 cpolar3. 创建Splunk Enterprise公网访问地址4. 远程访问Splunk Enterprise服务5. 固定远程地址 前言 本文主要介绍如何简单几步&#xff0c;结合cpolar内网穿透工具实现随时随地在任意浏览器&#xff0c;远程访问在本地…

Windows上构建一个和Linux类似的Terminal

感谢大佬批评指正&#xff0c;现已更新 preview Target&#xff1a;致力打造最赏心悦目Window下的终端&#xff0c;同时能够很接近Linux的使用习惯 key word&#xff1a;windows终端美化 windows terminal windows powershell 类似Linux下的Window终端 Window也能用ll windows…

105.从前序与中序遍历序列构造二叉树

// 定义一个名为 Solution 的类 class Solution {// 创建一个哈希映射&#xff08;Map&#xff09;对象&#xff0c;用于根据数值查找对应的索引位置Map<Integer, Integer> map;// 公共方法 buildTree&#xff0c;接收两个整数数组&#xff08;前序遍历序列 preorder 和 …

px、rem、vh、vw

一、基础概念 屏幕分辨率&#xff1a;纵横向上的像素点数&#xff0c;单位是px。 物理分辨率&#xff1a;出厂设置&#xff0c;硬件分辨率&#xff0c;1920*1080 逻辑分辨率&#xff1a;软件/驱动设置&#xff0c;缩放调解的分辨率&#xff0c;1920/150% 制作网页参考逻辑分…

Vue开发实例(八)Vuex状态管理store

Vuex状态管理store 一、Vuex的安装与配置二、store使用方法1、基础使用2、提交变更3、getters使用4、在其他页面&#xff08;组件&#xff09;中显示5、modules多模块 做vue项目的时候&#xff0c; store状态管理器可以帮助我们完成一些数据的存储和管理&#xff0c;通俗理解是…

2024-03-03 c++

&#x1f338; MFC进度条控件 | Progress Control 1。新建MFC项目&#xff08;基于对话框、静态库&#xff09; 2。添加控件&#xff0c;删除初始的3个多余控件 加1个progress control&#xff0c;修改其marquee为true&#xff0c;添加变量&#xff1a;变量名为test_progress。…

mysql8.0安装(zip版本)最详细

下载 https://dev.mysql.com/downloads/mysql/ 解压 [mysqld] # 设置3306端口 port3306 # 设置mysql的安装目录 basedirD:\Atools\mysql-8.0.30-winx64 # 切记此处一定要用双斜杠\\&#xff0c;单斜杠我这里会出错&#xff0c;不过看别人的教程&#xff0c;有的是单斜杠。自己…

探索数字未来:DApp钱包Defi引领新纪元

​小编介绍&#xff1a;10年专注商业模式设计及软件开发&#xff0c;擅长企业生态商业模式&#xff0c;商业零售会员增长裂变模式策划、商业闭环模式设计及方案落地&#xff1b;扶持10余个电商平台做到营收过千万&#xff0c;数百个平台达到百万会员&#xff0c;欢迎咨询。 随…

AI 视频、图片修复 CodeFormer 安装 使用

一 CodeFormer 优秀的开源修复图片与视频的项目 1 下载 开源地址&#xff1a;https://github.com/sczhou/CodeFormer 下载成功&#xff1a; 2 安装 解压进入目录 安装依赖 pip install -r requirements.txt 安装完成&#xff0c;测试运行&#xff0c;报了个错误如下&#xff…

白话transformer(一):注意力机制

前面我们分篇讲述了transformer的原理&#xff0c;但是对于很多刚接触transformer的人来说可能会有一点懵&#xff0c;所以我们接下来会分三篇文章用白话的形式在将transformer 讲一遍。 前文链接 Bert基础(一)–自注意力机制 Bert基础(二)–多头注意力 Bert基础(三)–位置编…

独立游戏《星尘异变》UE5 C++程序开发日志1——项目与代码管理

写在前面&#xff1a;本日志系列将会向大家介绍在《星尘异变》这款模拟经营游戏&#xff0c;在开发时用到的与C相关的泛用代码与算法&#xff0c;主要记录UE5C与原生C的用法区别&#xff0c;以及遇到的问题和解决办法&#xff0c;因为这是我本人从ACM退役以后第一个从头开始的项…

类加载器分类

类加载器&#xff08;Class Loader&#xff09;是Java虚拟机&#xff08;JVM&#xff09;的一个重要组件&#xff0c;负责加载Java类到内存中并使其可以被JVM执行。类加载器是Java程序的核心机制之一。 主要有一下四种类加载器&#xff1a; &#xff08;1&#xff09;启动类加…

01tire算法

01tire算法 #include<bits/stdc.h> using namespace std; #define maxn 210000 int a[maxn], ch[maxn][2], val[maxn], n, ans, tot; void insert(int x) {int now 0;for (int j 31; j > 0; j -- ){int pos ((x >> i) & 1);if (!ch[now][pos])ch[now][po…

【贪心算法】专题练习二

欢迎来到Cefler的博客&#x1f601; &#x1f54c;博客主页&#xff1a;折纸花满衣 &#x1f3e0;个人专栏&#xff1a;题目解析 &#x1f30e;推荐文章&#xff1a;【LeetCode】winter vacation training 目录 &#x1f449;&#x1f3fb;买卖股票的最佳时机&#x1f449;&…

Android Stdio Execution failed for task ‘:app:compileDebugKotlin‘ 报错解决

具体报错信息如下&#xff1a; compileDebugJavaWithJavac task (current target is 1.8) and compileDebugKotlin task (current target is 17)jvm target compatibility should be set to the same Java version.很显然&#xff0c;这是一个版本冲突问题&#xff0c;compile…

深入理解C语言:开发属于你的三子棋小游戏

三子棋 1. 前言2. 准备工作3. 使用二维数组存储下棋的数据4. 初始化棋盘为全空格5. 打印棋盘6. 玩家下棋7. 电脑下棋8. 判断输赢9. 效果展示10. 完整代码 1. 前言 大家好&#xff0c;我是努力学习游泳的鱼&#xff0c;今天我们会用C语言实现三子棋。所谓三子棋&#xff0c;就是…

分享经典、现代和前沿软件工程课程

随着信息技术的发展&#xff0c;软件已经深入到人类社会生产和生活的各个方面。软件工程是将工程化的方法运用到软件的开发、运行和维护之中&#xff0c;以达到提高软件质量&#xff0c;降低开发成本的目的。软件工程已经成为当今最活跃、最热门的学科之一。 本次软件工程MOOC课…

跟着这份指南,让你的下拉列表设计更加顺畅!

下拉列表广泛应用于UI设计中&#xff0c;可以简化界面&#xff0c;帮助用户缩小选择范围&#xff0c;减轻用户认知负担&#xff0c;防止数据输入错误。但与此同时&#xff0c;它也是一个受到用户批评的灾区。在某些情况下&#xff0c;下拉列表不仅意义不大&#xff0c;而且对用…

全新攻击面管理平台

首页大屏 内测阶段&#xff0c;免费试用一个月 有兴趣体验的师傅&#xff0c;来长亭云图极速版群里找我 py

面试经典150题【51-60】

文章目录 面试经典150题【51-60】71.简化路径155.最小栈150.逆波兰表达式求值224.基本计算器141.环形链表2.两数相加21.合并两个有序链表138.随机链表的复制19.删除链表的倒数第N个节点82.删除链表中的重复元素II 面试经典150题【51-60】 71.简化路径 先用split(“/”)分开。然…