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.mzph.cn/news/5175.shtml

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

相关文章

oracle常见面试回答

以下是Oracle面试中常见的一些问题和附加答案&#xff1a; 问题&#xff1a;什么是Oracle分区表&#xff1f; 答案&#xff1a;Oracle分区表是一种将表分成多个部分的机制&#xff0c;这些部分被称为分区。每个分区都是一个独立的对象&#xff0c;可以单独管理和维护。分区表…

2023出海增长背后的隐忧

2023出海增长背后的隐忧 2023.7.19版权声明&#xff1a;本文为博主chszs的原创文章 今年出口逆势增长的领域&#xff0c;新能源车、锂电池、太阳能电池&#xff0c;号称新三样&#xff0c;有数据支撑&#xff0c;看起来鼓舞人心。 见&#xff1a;外贸出口“新三样”&#xf…

有Root与无Root安装git-lfs

有Root与无Root安装git-lfs 直接安装 先查看arm还是AMD 例如当前使用Rocky Linux 8.8版本的内核。因此&#xff0c;应该下载适用于Rocky Linux 8.x的Git LFS安装包。 您可以按照以下步骤在Rocky Linux上安装Git LFS&#xff1a; 打开终端或命令提示符窗口。 使用以下命令下…

python、go观察者模式

观察者模式&#xff0c;核心在于 被观察者的信息发生改变会通知观者者被观察者可以添加和删除观察者观察者需要有更新的行为 python实现 # 观察者 class Observer:def __init__(self, name):self.name namedef update(self, content):print(f"【{self.name}】接收到消…

【半监督医学图像分割 2023 CVPR】PatchCL

文章目录 【半监督医学图像分割 2023 CVPR】PatchCL摘要1. 简介2. 相关工作2.1 半监督学习2.2 对比学习 3. 方法3.1 类感知补丁采样3.2 伪标记引导对比损失3.3 总体学习目标3.4 伪标号生成与求精 4. 实验5. 结果 【半监督医学图像分割 2023 CVPR】PatchCL 论文题目&#xff1a;…

java: 错误: 不支持发行版本 5 java: 错误: 不支持发行版本8 java: 错误: 不支持发行版本17

&#x1f353;&#x1f353;原因 该错误表示你使用的Java编译器不支持Java 5版本的发行。Java版本的发行是根据不同的功能和语言变化来区分的。 要解决这个问题&#xff0c;你可以尝试以下几种方法&#xff1a; 检查编译器配置&#xff1a;确保你的IDE或编译器已正确配置为使…

【C++初阶】list的模拟实现 附源码

一.list介绍 list底层是一个双向带头循环链表&#xff0c;这个我们以前用C语言模拟实现过&#xff0c;->双向带头循环链表 下面是list的文档介绍&#xff1a; list文档介绍 我们会根据 list 的文档来模拟实现 list 的增删查改及其它接口。 二.list模拟实现思路 既然是用C模拟…

缓存数据一致性探究

缓存数据一致性探究 缓存是一种较低成本提升系统性能的方式&#xff0c;自它面世第一天起就备受广大开发者的喜爱。然而正如《人月神话》中的那句经典的“没有银弹”中所说&#xff0c;软件工程的设计没有银弹。 就像每一次发布上线修复问题的同时&#xff0c;也极易引入新的问…

js中${}的用法

${xx}:是一种前端模板字符串的写法&#xff0c;${}结构包裹着变量xx&#xff1b;这里的$是写法要求。 作为ES6中新增的字符串方法&#xff0c;其作用是配合反单引号实现字符串拼接。代替以前传统复杂的引号双引号与的拼接&#xff0c;简介明了&#xff0c;非常好用。 反单引号&…

Docker学习路线8:容器注册表

容器注册表是Docker容器镜像的集中存储和分发系统。它允许开发人员以这些镜像的形式轻松共享和部署应用程序。容器注册表在容器化应用程序的部署中发挥着关键作用&#xff0c;因为它们提供了一种快速、可靠和安全的方式&#xff0c;在各种生产环境中分发容器镜像。 以下是当今…

[centos]安装mysql8.0.26

1、首先&#xff0c;根据自己的机子到MySQL官网下载对应的数据库https://dev.mysql.com/downloads/mysql/ 2、卸载mariadb&#xff0c;并解压Mysql 3、安装 rpm -ivh mysql-community-common-8.0.26-1.el7.x86_64.rpm --nodeps rpm -ivh mysql-community-libs-8.0.26-1.el7.x…

RT-Thread 学习-Env开发环境搭建(一)

Env是什么 Env 是 RT-Thread 推出的开发辅助工具&#xff0c;针对基于 RT-Thread 操作系统的项目工程&#xff0c;提供编译构建环境、图形化系统配置及软件包管理功能。 其内置的 menuconfig 提供了简单易用的配置剪裁工具&#xff0c;可对内核、组件和软件包进行自由裁剪&…

idea新建xml模板设置,例如:mybatis-config

在idea怎么新建mapper.xml文件&#xff0c;具体操作步骤和结果如下&#xff0c;其他文件也是可以自定义模板的流程和步骤一致&#xff01; 效果如下&#xff1a; 步骤如图&#xff1a; step1&#xff1a; step2&#xff1a; 文件内容&#xff1a; <?xml version"…

udp传输大数据的原理和相关问题注意事项

UDP协议本身不提供大数据传输的分片、重组、丢包重传等功能&#xff0c;因此需要对大数据传输进行特殊处理。以下是UDP传输大数据一些常见的处理方法。 &#xff08;1&#xff09;对大文件进行分块&#xff1a;将大文件划分为多个小块进行传输&#xff0c;每个小块都可以使用UD…

安装k8s-ubuntu补充

原文链接&#xff1a;k8s安装——ubuntu_ubuntu安装k8s_流夏_的博客-CSDN博客 kubeadm init 安装docker2 按照 kubeadm config images list的结果去拉取对应的镜像 国内仓库地址registry.cn-hangzhou.aliyuncs.com/google_containers/ rootzkys:/home/k8s_yaml_install# kube…

IntelliJ IDEA 2023.2 新版本即将发布,拥抱 AI

IntelliJ IDEA 近期连续发布多个EAP版本&#xff0c;官方在对用户体验不断优化的同时&#xff0c;也新增了一些不错的功能&#xff0c;尤其是人工智能助手补充&#xff0c;AI Assistant&#xff0c;相信在后续IDEA使用中&#xff0c;会对开发者工作效率带来不错的提升。 以下是…

【SpringBoot】@ConditionalOnProperty 条件注解

SpringBoot ConditionalOnProperty 注解 简介 ConditionalOnProperty&#xff1a;根据属性值来控制类或某个方法是否需要加载。它既可以放在类上也可以放在方法上。 ConditionalOnProperty属性 Retention(RetentionPolicy.RUNTIME) Target({ ElementType.TYPE, ElementType.MET…

GStreamer Playback tutorial 学习笔记(一)

playbin运用 多流处理&#xff1a;一个电影&#xff0c;对应一个视频和多个音频流&#xff08;立体声/5.1声道被视为一个单独的流&#xff09;&#xff0c;以适应不同的语言。在这种情况下&#xff0c;用户选择一个音频流&#xff0c;应用程序只播放选定的音频流&#xff0c;忽…

安卓:Fragment

目录 一、Fragment介绍 二、Fragment的使用方式 &#xff08;一&#xff09;、Fragment静态添加&#xff1a; 静态添加例子&#xff1a; FirstFragment &#xff1a; MainActivity: main_activity: fragment_first: 静态添加的总结&#xff1a; &#xff08;二&…

Android 中app内存回收优化(一):R版本

版本基于&#xff1a;Android R 0. 前言 Android Q 中新增了framework 端app 内存回收优化方案。当app 的 oom adj 发生特定变化时&#xff0c;framework 端会对应用的内存进行处理。随着版本的演变&#xff0c;这部分优化工作也一直在完善&#xff0c;笔者将针对 Android R 和…