elemenPlus ElMessage 字符串如何换行问题

news2024/11/22 22:04:53

因为后端返回的数据是一长串,而且带有\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
	})

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

为何有很多人选择使用ChatGPT的替代品?

尽管ChatGPT备受赞誉且确实是出色的工具&#xff0c;但它也有一些限制。 现在有一些工具比ChatGPT更为经济&#xff0c;并且拥有大量现成的功能&#xff0c;而在ChatGPT中&#xff0c;这需要收集整理编写大量的提示。[1] ChatGPT没有提供对GPT-4模型的无限访问&#xff0c;也没…

GIS应用技巧之空间插值分析

一、空间插值概论 空间插值常用于将离散点的测量数据转换为连续的数据曲面&#xff0c;以便探究空 间现象的分布模式&#xff0c;该方法通常用来分析地区环境污染、地区降水量、地区气候 变化、资源利用程度、公共基础设施影响效应等。空间插值方法分为两类&#xff1a;一类 是…

c语言——判断一个字符有多少位数

//判断一个字符有多少位数 #include<stdio.h> #include<stdlib.h> int main() {long long n;int count0;printf("输入整数&#xff1a;");scanf("%lld",&n);while(n!0){n/10;count;} printf("数字是%d位数\n",count);system(&qu…

探索组间差异利器:Tukey 检验 【Tukey Test】

前言 统计学中有许多方法可用于比较不同组别之间的差异&#xff0c;而其中一种常见且强大的工具就是Tukey检验。当我们进行多组实验或研究时&#xff0c;常常需要了解哪些组别之间存在显著差异&#xff0c;而不仅仅是确定是否存在差异。在这个问题上&#xff0c;Tukey检验可以为…

ArcGIS Pro怎么解决道路压盖问题

在默认情况下&#xff0c;道路可能会存在低等级道路将高等级道路压盖、在道路连接处不连通的情况&#xff0c;这些问题都可以在ArcGIS Pro内解决&#xff0c;这里为大家介绍一下处理方法&#xff0c;希望能对你有所帮助。 道路分级 在符号系统内&#xff0c;选择唯一值&#x…

查看镁光DDR芯片型号的办法

查看镁光DDR芯片型号的办法 百度镁光官网 搜索decoder 输入需要查询的FBGA信息 镁光芯片丝印有两行&#xff0c;第一行为产地&#xff0c;不用管&#xff0c;第二行就是FBGA

PLSQL DEVELOPER 右侧工具栏剪贴板不见了怎么显示

解决&#xff1a;在左侧顶级菜单中找到视图&#xff0c;然后找到PLSQL剪贴板&#xff0c;把它勾选上&#xff0c;就会显示出来了。

企业虚拟直播是什么,操作界面和直播观看界面截图介绍

企业虚拟直播是什么&#xff0c;操作界面和直播观看界面截图介绍 企业MR虚拟直播操作界面和直播观看界面 “虚拟场景虚拟特效虚拟录播/直播”技术方案.MR虚拟直播 MR虚拟直播带来的内容、体验和互动的升级&#xff0c;对多个行业、场景具有重大意义&#xff0c;尤其是在汽车、科…

MySQL 、Sql server 错误处理机制 \输出特点的错误信息

sql server 错误处理机制 try 。。。catch ---Try Catch Syntax BEGIN TRY{<sql statements>} end TRY BEGIN Catch{<sql> statements} end catch [;]MySQL 程序错误处理机制 ** 定义条件 定义处理程序** 定义条件&#xff1a; declare 错误名称 condition …

物流签收异常,财务对账复杂,怎么解决?

电子商务行业的蓬勃发展为人们的购物体验带来了巨大的便利&#xff0c;然而&#xff0c;随之而来的物流签收异常和财务对账复杂问题却给电商企业的财务部门带来了一系列困扰。 每天大量的订单和货物流转&#xff0c;不可避免地导致了物流签收数据与财务记录之间的不一致和差异…

七夕特别!用代码绘制爱心,送你一份浪漫的礼物

七夕情人节即将来临&#xff0c;是时候为心爱的人准备一份特别的礼物了。不过&#xff0c;我们今天要来换个方式&#xff0c;用一段简单的Python代码绘制一个爱心图案&#xff0c;再搭配一个暖心的七夕文案&#xff0c;为这个特别的日子增添一份浪漫与惊喜。 # -*- coding: ut…

基于Element-ui的颜色选取器,增加最近使用的颜色。

8个预设颜色值&#xff0c;使用一个颜色后&#xff0c;将颜色放到第一个预设颜色&#xff0c;去重&#xff0c;保存到本地。 完整代码自取 <template><div><el-color-picker :value"value" show-alpha :predefine"predefineColors" chan…

实例041 获取桌面大小

实例说明 获取桌面分辨率可以使用API函数GetDeviceCaps&#xff0c;但API函数参数较多&#xff0c;使用不方便&#xff0c;如何更方便的获取桌面分辨率呢&#xff1f;在本例中&#xff0c;通过读取Screen对象的属性&#xff0c;来获取桌面分辨率信息&#xff0c;以像素为单位。…

IBM LSF 系统简介

IBM LSF 系统简介 LSF&#xff08;Load Sharing Facility&#xff09;是IBM旗下的一款分布式集群管理系统软件&#xff0c;负责计算资源的管理和批处理作业的调度。它给用户提供统一的集群资源访问接口&#xff0c;让用户透明地访问整个集群资源。同时提供了丰富的功能和可定制…

实时拍照翻译怎么做?几个步骤轻松翻译

现在&#xff0c;随着人们跨越国界的频率不断增加&#xff0c;语言障碍成为了一个越来越普遍的问题。为了解决这个问题&#xff0c;一些应用程序开始提供实时拍照翻译功能&#xff0c;这种功能可以通过手机摄像头拍摄文本&#xff0c;并将其翻译成用户所需的语言。那么&#xf…

YOLO目标检测——动漫头像数据集下载分享

动漫头像数据集是用于研究和分析动漫头像相关问题的数据集&#xff0c;它包含了大量的动漫风格的头像图像。动漫头像是指以动漫风格绘制的虚构人物的头像图像&#xff0c;常见于动画、漫画、游戏等媒体。 数据集点击下载&#xff1a;YOLO动漫头像数据集50800图片.rar

结构型(四) - 装饰器模式

一、概念 装饰器模式&#xff08;Decorator Pattern&#xff09;&#xff1a;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种模式创建了一个装饰类&#xff0c;用来包装原有的类&#xff0c;并在保持类方法签名完整性的前提下&#xff0c;提供了额外的…

【Java转Go】快速上手学习笔记(五)之Gorm篇

目录 go get命令1、go get命令无响应问题2、Unresolved dependency错误 连接数据库连接.gomain.go 操作数据库创建表新增数据更新数据删除数据查询数据单表查询多表查询 用到的数据库表原生SQL 完整代码 go往期文章笔记&#xff1a; 【Java转Go】快速上手学习笔记&#xff08;…

python-docx把dataframe表格添加到word文件中

python-docx把dataframe表格添加到word文件中思路较为简单&#xff1a; 先把dataframe格式转变为table新建一个段落&#xff1a;document.add_paragraph()把table添加到这个段落下方 效果图 示例代码 from docx import Document, oxml import pandas as pd import numpy as …

什么是安全测试报告,怎么获得软件安全检测报告?

安全测试报告 软件安全测试报告&#xff1a;是指测试人员对软件产品的安全缺陷和非法入侵防范能力进行检查和验证的过程&#xff0c;并对软件安全质量进行整体评估&#xff0c;发现软件的缺陷与 bug&#xff0c;为开发人员修复漏洞、提高软件质量奠定坚实的基础。 怎么获得靠谱…