VUE $message中的内容换行

最新推荐文章于 2025-05-30 11:15:27 发布

转载最新推荐文章于 2025-05-30 11:15:27 发布 · 5.3k 阅读

7 ·

CC 4.0 BY-SA版权

原文链接：https://www.cnblogs.com/wangxiaoer5200/p/11491816.html

文章标签：

#vue.js

在Vue中使用$message提示框显示多行信息的方法是通过设置`dangerouslyUseHTMLString`属性为`true`，然后使用HTML的`<br/>`标签进行换行。例如，将字符串数组通过`join('<br/>')`拼接，再在$message的配置中设置，可以成功实现多行展示。此技巧适用于需要在警告或错误提示中展示多条信息的场景。

部署运行你感兴趣的模型镜像

在vue的$message提示框中，有多行信息需要展示，但是找来找去找不到方法，也找不到$message的可用属性，找了半天就有一位大哥做了总结，只能借用下

let arr = ['测试一', '测试二', '测试三'];
      let str = arr.join(' <br/> ');
      this.$message({
        dangerouslyUseHTMLString: true,
        message: str,
        type: 'warning'
});

dangerouslyUseHTMLString: true，实现换行；

个人使用：

res.data.data为axios请求返回的数据，数据类型String

            let arr = ['删除失败!', "信息仍在使用：" + res.data.data];
            let str = arr.join(' <br/> ');
            this.$message({
              dangerouslyUseHTMLString: true,
              message: str,
              type: 'error'
            });

转载自vue的$message（提示框换行） - 进军的王小二 - 博客园 (cnblogs.com)

您可能感兴趣的与本文相关的镜像

Python3.10

Conda

Python

Python 是一种高级、解释型、通用的编程语言，以其简洁易读的语法而闻名，适用于广泛的应用，包括Web开发、数据分析、人工智能和自动化脚本