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 属性设置为 true ，message 就会被当作 HTML 片段处理。
  2. 消息的换行，通过 <br/> 实现，默认行距太小，推荐使用两个换行标签，即 <br/><br/>

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