element-ui下提示框messageBox内容换行问题

最新推荐文章于 2026-04-25 02:24:04 发布

原创最新推荐文章于 2026-04-25 02:24:04 发布 · 6.1k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端知识

当前文章被收录于：

前端知识

4 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

本文介绍如何在Element-ui中使用危险模式实现自定义弹窗样式，包括换行、调整字号、设置颜色等，通过设置dangerouslyUseHTMLString属性为true，可以以HTML方式输入内容。

诉求：在使用element-ui的情况下，想在前端弹出提示框，且框内的消息可以自由换行。

解决方法：在this.alert中加一个配置：

dangerouslyUseHTMLString:true

然后就可以以html的方式输入提示框的内容了，可以自由的调整字号，换行，空格，颜色等。

源码：

this.$alert('<h4>这是第一行</h4><br><h5 style="color:lightgrey">这是第二行</h5>', '', {
                                    dangerouslyUseHTMLString:true,
                                    confirmButtonText: '确定',
                                    center:true,
                                    callback: action => {
                                        return;
                                    }
                                });

最终结果：