element-ui message消息提示组件 ①延长提示消息在页面停留时间②提示消息换行

以实现下面的效果为示例

在这里插入图片描述

 完整代码:

      let msgList = ["数据1被引用", "数据2被引用"];
      // 使用html的换行标签拼接信息,默认行距太小,此处用两个<br/><br/>
      let message = `以下数据不能删除,原因是:<br/><br/>${msgList.join(
        "<br/><br/>"
      )}`;
      this.$message({
        type: "warning",
        message: message,
        // 将 message 就会被当作 HTML 片段处理
        dangerouslyUseHTMLString: true,
        duration:1200,
      });

一、延长提示消息在页面停留时间,使用 duration:1200(1200是想延迟的时间,自己定义)

二、提示消息换行

核心代码为:

  1. 将 this.$message 的 dangerouslyUseHTMLString 属性设置为 truemessage 就会被当作 HTML 片段处理。
  2. 消息的换行,通过 <br/> 实现,默认行距太小,推荐使用两个换行标签,即 <br/><br/>

部分内容借鉴:element UI 中多行消息提示的实现(this.$message的换行)_el-message换行_朝阳39的博客-CSDN博客

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

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

相关文章

为什么很多公司都开始使用Go语言了?

越来越多的互联网大厂开始使用Go语言了&#xff0c;譬如腾讯、美团、滴滴、百度、Google、bilibili... 还有最初使用Python的字节跳动&#xff0c;甚至已经全面拥向Go了。这么多国内外首屈一指的公司&#xff0c;都在开始使用它了&#xff0c;它到底有什么优势呢&#xff1f;这…

Redis进阶底层原理-主从复制

Redis的主从节点都会记录对方的信息&#xff0c;核心还包括ReplicationID 和 offset &#xff0c; ReplicationID &#xff1a; 主从节点实例的ID &#xff0c;redis内部就是通过这个id去识别主从节点。offset&#xff1a;数据同步偏移量&#xff0c;也就是从节点每次从主节点同…

硬中断、软中断详解

文章目录 什么是中断&#xff1f; 什么是计算机的中断&#xff1f; 什么叫硬中断、什么叫软中断&#xff1f; 怎么查看硬中断、软中断 查看硬中断的运行情况 cat /proc/interrupts 查看软中断的运行情况 cat /proc/softirqs 怎么排查软中断过高的问题&#xff1f; 软中断注意事…

noSQL的小练习

目录 Redis&#xff1a; 1、 string类型数据的命令操作&#xff1a; 2、 list类型数据的命令操作&#xff1a; 3、 hash类型数据的命令操作&#xff1a; MongoDB&#xff1a; 1. 创建一个数据库 名字grade 2. 数据库中创建一个集合名字 class 3. 集合中插入若…

接入端口与中继端口

交换机端口是支持 IT 的基本组件&#xff0c;可实现网络通信。这些有线硬件设备负责连接并允许在不同设备和连接到其端口的网络部分之间进行数据传输。由于网络管理员在确保网络连接和可用性方面发挥着关键作用&#xff0c;因此网络管理员必须清楚地了解、映射和查看其网络交换…

从小白到大神之路之学习运维第64天--------Zabbix监控mysql、ftp服务以及自定义配置

第三阶段基础 时 间&#xff1a;2023年7月19日 参加人&#xff1a;全班人员 内 容&#xff1a; Zabbix监控mysql、ftp服务以及自定义 目录 一、Zabbix监控mysql数据库 二、Zabbix监控ftp服务 三、Zabbix自定义监控项 整体zabbix搭建完成&#xff0c;server端huyang1监…

SpringBoot中整合Sharding Sphere实现数据加解密/数据脱敏/数据库密文,查询明文

场景 为防止数据泄露&#xff0c;需要在插入等操作时将某表的字段在数据库中加密存储&#xff0c;在需要查询使用时明文显示。 Sharding Sphere ShardingSphere是一套开源的分布式数据库中间件解决方案组成的生态圈&#xff0c; 它由Sharding-JDBC、Sharding-Proxy和Shardi…

确认应答机制与超时重发机制【TCP原理(笔记一)】

文章目录 通过序列号与确认应答提高可靠性正常的数据传输数据包丢失的情况确认应答丢失的情况发送的数据 重发超时如何确定 通过序列号与确认应答提高可靠性 在TCP中&#xff0c;当发送端的数据到达接收主机时&#xff0c;接收端主机会返回一个已收到消息的通知。这个消息叫做…

iOS 中支持点击网页scheme超链接打开其他app

网页内容如图所示 思路&#xff0c;点击网页中一个href 超链接的时候&#xff0c;会执行 decidePolicyForNavigationAction 方法&#xff0c;我们在改方法中截获URL&#xff0c; 判断如果是URL scheme类型的&#xff0c;则执行 [[UIApplication sharedApplication]openURL:URL…

Tabby - 本地化AI代码自动补全 - Windows10

参考&#xff1a; https://github.com/TabbyML/tabby 为什么选择Tabby 已经有好几款类似强劲的代码补全工具&#xff0c;如GitHub Copilot&#xff0c;Codeium等&#xff0c;为什么还要选择Tabby? Tabby除了和其他工具一样支持联网直接使用之外&#xff0c;还支持本地化部…

椒图——靶场模拟

先查看ip&#xff0c;10.12.13.232模拟的外网ip&#xff0c;其他的模拟内网ip&#xff0c;服务里面搭建好的漏洞环境。 #第一个测试项目&#xff0c;web风险发现 新建&#xff0c;下发任务&#xff0c;点威胁检测&#xff0c;webshell&#xff0c;点扫描任务&#xff0c;点新…

Star History 月度开源精选|2023 年 6 月

上一期 Star History 月度精选是写给市场、运营人员的&#xff0c;而这一期回归到 DevTools 类别&#xff0c;我们六月发现了好一些开发者可以用的不错工具&#xff01; AI Getting Started 还记得 Supabase “Build in a weekend” 的广告词吗&#xff01;AI Getting Started…

消息队列——RabbitMQ基本概念+容器化部署和简单工作模式程序

目录 基本概念 MQ 的优势 1.应用解耦 2.异步提速 3.削峰填谷 MQ 的劣势 使用mq的条件 常见MQ产品 RabbitMQ简介 RabbitMQ的六种工作模式 JMS RabbitMQ安装和配置。 RabbitMQ控制台使用。 RabbitMQ快速入门——生产者 需求: RabbitMQ快速入门——消费者 小结 基本概…

S32 Design Studio for ARM(S32DS)下载和安装

1. S32 Design Studio for ARM 介绍 S32 Design Studio for ARM&#xff08;下面简称S32DS&#xff09;&#xff0c;是 NXP 官方在 2014 年官方推出的&#xff0c;专门面向 S32K、KEA、MAC57D54H等系列微控制器的集成开发环境。 S32DS是由Eclipse和一些插件集成而来的开发平台…

MYSQL数据库-数据库的学习

MYSQL数据库-数据库的学习 MYSQL数据库一、数据库的基本概念二、常见的数据库三、MySQL数据库四、SQL操作五、SQL高级操作六、SQL函数&#xff08;SQL 拥有很多可用于计数和计算的内建函数) MYSQL数据库 一、数据库的基本概念 1、数据库的英文单词:DataBase 简称 : DB 2、什么…

2023年经典【自动化面试题】附答案

一、请描述一下自动化测试流程&#xff1f; 自动化测试流程一般可以分为以下七步&#xff1a; 编写自动化测试计划&#xff1b; 设计自动化测试用例&#xff1b; 编写自动化测试框架和脚本&#xff1b; 调试并维护脚本&#xff1b; 无人值守测试&#xff1b; 后期脚本维…

MySQL中这14个小玩意,让人眼前一亮!!!

前言 我最近几年用MYSQL数据库挺多的&#xff0c;发现了一些非常有用的小玩意&#xff0c;今天拿出来分享到大家&#xff0c;希望对你会有所帮助。 1.group_concat 在我们平常的工作中&#xff0c;使用group by进行分组的场景&#xff0c;是非常多的。 比如想统计出用户表中…

uniapp调接口出现跨域问题。

今天在写uniapp项目的时候&#xff0c;使用在线模拟接口的时候&#xff0c;出现跨域问题。 【问题描述】&#xff1a; ①在内嵌浏览器运行&#xff0c;不会出现跨域问题&#xff0c;好像是内嵌浏览器自动去掉了跨域问题。 ②在外部浏览器调用的时候会出现跨域问题。&#xf…

MIT 6.829 -- L2 The Internetworking Problem

MIT 6.829 -- L2 The Internetworking Problem 前言The Internetworking Problem: Many Different NetworksGateWays互联网设计原则通用性原则健壮性原则互联网缺点互联网协议标准流程 最早的TCP/IP今天的TCP/IP: IPv4地址分片和重组Time-to-live&#xff08;TTL&#xff09;Ty…

使用亚马逊(AWS)云服务在S3上实现图片缩放功能(CloudFront/S3[AccessPoint/LambdaAccessPoint])

亚马逊云服务中的S3对象存储功能和国内阿里云的oss对象存储使用基本一致。但是涉及到存储内容处理时&#xff0c;两家有些差别。 比如&#xff1a;对于云存储中的图片资源&#xff0c;阿里云比较人性化对于基本的缩放裁剪功能已经帮我们封装好了&#xff0c;只需要在url地址后…
最新文章