elemenPlus ElMessage 字符串如何换行问题

因为后端返回的数据是一长串,而且带有\r,\n等换行符,但是并没有生效。前端写法:

	// 抛出错误
	ElMessage.error(msg);

我们知道\r,\n,\r\n 是在不同系统下的换行符的表示,但在JavaScript返回字符串中并没有生效,所以我们需要将字符串中的换行符替换成在HTML中的 <br/>标签。

	// 抛出错误
	// ElMessage.error(msg);
	const newMsg = msg.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
	// console.log(newMsg )

但是这样在ElMessage的提示框中并没有生效,没有换行显示,所以要用到dangerouslyUseHTMLString属性,但是需要注意该属性的应用,可能会导致XSS攻击。
在这里插入图片描述
然后修改代码如下:

	// 抛出错误
	// ElMessage.error(msg);
	const newMsg = msg.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
	ElMessage({
		type:'error',
		dangerouslyUseHTMLString:true,
		message:newMsg
	})

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

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

相关文章

ElasticSearch学习2

1、索引的操作 1、创建索引 对ES的操作其实就是发送一个restful请求&#xff0c;kibana中在DevTools中进行ES操作 创建索引时需要注意ES的版本&#xff0c;不同版本的ES创建索引的语句略有差别&#xff0c;会导致失败 如下创建一个名为people的索引&#xff0c;settings&…

SqlServer 快速数据库脚本迁移

文章目录 前言数据库脚本数据库->任务->生成脚本选择数据库对象高级 如何迁移&#xff1a;脚本修改 如何使用新建数据库 前言 做工业的&#xff0c;经常遇到内网的项目&#xff0c;就是数据往本地的数据库传。由于这个问题所以我们需要新建一个数据库。最合适的就是数据…

编写一个俄罗斯方块

编写俄罗斯方块 思路。 1、创建容器数组&#xff0c;方块&#xff0c; 2、下落&#xff0c;左右移动&#xff0c;旋转&#xff0c;判断结束&#xff0c;消除。 定义一个20行10列的数组表示游戏区。初始这个数组里用0填充&#xff0c;1表示有一个方块&#xff0c;2表示该方块固…

Nvidia Jetson 编解码开发(3)解决H265解码报错“PPS id out of range”

1.问题描述 基于之前的开发程序 Nvidia Jetson 编解码开发(2)Jetpack 4.x版本Multimedia API 硬件编码开发--集成encode模块_free-xx的博客-CSDN博客 通过Jetson Xavier NX 硬编码的H265发出后, 上位机断点播放发出来的H265码流, 会报“PPS id out of range” 错误 …

2023年最佳JavaScript框架:React、Vue、Angular和Node.js的比较

文章目录 React&#xff1a;构建用户界面的首选Vue&#xff1a;简单优雅的前端框架Angular&#xff1a;Google支持的全面框架Node.js&#xff1a;服务器端的JavaScript运行环境比较不同框架的优势与劣势React&#xff1a;Vue&#xff1a;Angular&#xff1a;Node.js&#xff1a…

Pytest使用fixture实现token共享

同学们在做pytest接口自动化时&#xff0c;会遇到一个场景就是不同的测试用例需要有一个登录的前置步骤&#xff0c;登录完成后会获取到token&#xff0c;用于之后的代码中。首先我先演示一个常规的做法。 首先在conftest定义一个login的方法&#xff0c;方法返回token pytes…

python 打印一个条形堆积图

背景 今天介绍一个不使用 matplot&#xff0c;通过 DebugInfo模块打印条形堆积图 的方法。 引入模块 pip install DebugInfo打印销售转化数据 下面的代码构建了两个销售团队&#xff0c;团队A 和团队B&#xff1b;两个团队的销售数据构成了公司总的销售成果。以条形堆积图的…

bug记录:微信小程序 给button使用all: initial重置样式

场景&#xff1a;通过uniapp开发微信小程序 &#xff0c;使用uview的u-popup弹窗&#xff0c;里面内嵌了一个原生button标签&#xff0c;因为微信小程序的button是有默认样式的&#xff0c;所以通过all: initial重置样式 。但是整个弹窗的点击事件都会被button上面的点击事件覆…

node没有自动安装npm时,如何手动安装 npm

之前写过一篇使用 nvm 管理 node 版本的文章&#xff0c;node版本管理&#xff08;Windows&#xff09; 有时候&#xff0c;我们使用 nvm 下载 node 时&#xff0c;node 没有自动下载 npm &#xff0c;此时就需要我们自己手动下载 npm 1、下载 npm下载地址&#xff1a;&…

java请求SAP系统,发起soap的xml报文,实体类转换,idea自动生成教程

1、将接口的网页地址&#xff0c;右键保存&#xff0c;然后修改文件后缀为wsdl文件 2、idea全局搜索 wsdl&#xff0c;找到自动转换javabean插件&#xff1a; 3、点击后&#xff0c;选择下载改完后缀的文件(选择)&#xff1a; 4、将无用的class文件删除掉 5、请求sap的地址为…

嵌入式蓝海变红海?其实是大浪淘沙!

嵌入式是当下热门的职业方向之一&#xff0c;吸引了众多求职者的目光。然而&#xff0c;有人担心大家一拥而上&#xff0c;导致嵌入式就业竞争激烈&#xff0c;找工作难度大。其实&#xff0c;嵌入式行业的竞争并非无法逾越的天堑&#xff0c;也远远没有从蓝海变成红海&#xf…

【Redis从头学-7】Redis中的Set数据类型实战场景之用户画像去重、共同关注、专属粉丝

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Re…

春秋云镜 CVE-2019-2725

春秋云镜 CVE-2019-2725 Weblogic < 10.3.6 ‘wls-wsat’ XMLDecoder 反序列化漏洞 靶标介绍 Oracle Fusion Middleware&#xff08;子组件&#xff1a;Web Services&#xff09;的 Oracle WebLogic Server 组件中的漏洞。受影响的受支持版本为 10.3.6.0.0 和 12.1.3.0.0。…

Python爬虫实战案例——第一例

X卢小说登录(包括验证码处理) 地址&#xff1a;aHR0cHM6Ly91LmZhbG9vLmNvbS9yZWdpc3QvbG9naW4uYXNweA 打开页面直接进行分析 任意输入用户名密码及验证码之后可以看到抓到的包中传输的数据明显需要的是txtPwd进行加密分析。按ctrlshiftf进行搜索。 定位来到源代码中断点进行调…

python 开发环境(PyCharm)搭建指南

Python 的下载并安装 参考&#xff1a;Python基础教程——搭建Python编程环境 下载 Python Python 下载地址&#xff1a;官网 &#xff08;1&#xff09;点击【Downloads】>>>点击【Windows】>>>点击【Python 3.x.x】下载最新版 Python&#xff1b; Pyt…

resource doesn‘t have a corresponding Go package.

resource doesnt have a corresponding Go package. GO这个鬼东西不能直接放src下。 ************ Building Go project: ProjectGoTest ************with GOPATH: D:\Go;D:\eclipse-jee-oxygen-2-win32-x86_64\workspace\ProjectGoTest >> Running: D:\Go\bin\go.exe …

SNAT和DNAT

SNAT和DNAT 一、SNAT策略及应用1.1SNAT策略概述1.2开启SNAT的命令1.2.1 临时打开1.2.2永久打开 1.3SNAT转换1&#xff1a;固定的公网IP地址1.4SNAT转换2&#xff1a;非固定的公网IP地址&#xff08;共享动态IP地址&#xff09;1.5SNAT案例1.5.1实验准备1.5.2配置网关服务器&…

(数字图像处理MATLAB+Python)第十章图像分割-第三,四节:区域分割和基于聚类的图像分割

文章目录 一&#xff1a;区域分割&#xff08;1&#xff09;区域生长A&#xff1a;原理B&#xff1a;示例C&#xff1a;程序 &#xff08;2&#xff09;区域合并A&#xff1a;原理B&#xff1a;示例C&#xff1a;程序 &#xff08;3&#xff09;区域分裂A&#xff1a;原理B&…

二叉树的遍历

二叉树的遍历 关于二叉树的遍历方式&#xff0c;要知道二叉树遍历的基本方式都有哪些。二叉树主要有两种遍历方式&#xff1a; 深度优先遍历&#xff1a;先往深走&#xff0c;遇到叶子节点再往回走。 前序遍历&#xff08;递归法&#xff0c;迭代法&#xff09;中序遍历&#…

tailscale使用教程(远程连接服务器)

tailscale&#xff1a;将多个设备放在同一局域网下&#xff0c;实现异地组网。 首先进入tailscale官网&#xff0c;根据系统需求进行下载 需要远程的设备和被远程的设备都需要下载。 然后两个设备均登录同一账号即可 注&#xff1a;这里重点讲一下linux操作系统上的操作&…