前端在this.$message.error中实现换行或居中的操作-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端在this.$message.error中实现换行或居中的操作。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1- 在this.$message.error的参数中使用\n字符来表示换行，

例如this.$message.error('第一行\n第二行')。

2- 在this.$message.error的参数中使用<br>标签来表示换行，并且设置dangerouslyUseHTMLString: true属性，

例如this.$message.error({ dangerouslyUseHTMLString: true, message:'第一行<br>第二行', })。

3- 在this.$message.error的参数中使用数组来表示多行消息，并且设置dangerouslyUseHTMLString: true属性，

例如this.$message.error({ dangerouslyUseHTMLString: true, message:['第一行', '第二行'].join('<br>') })。
~~---------------------------------------------------------------------------------------------------------------------------------------------------------------------~~

居中：文章来源地址https://www.toymoban.com/news/detail-744784.html

也是同理于换行操作，主要是设置这个dangerouslyUseHTMLString属性，让这里面的文本可以被html格式编辑，由于markdown的某些bug，先写在代码块里

1- 在this.$message.error的参数中使用<p>标签来表示换行，并且设置dangerouslyUseHTMLString: true属性，
例如this.$message.error({ dangerouslyUseHTMLString: true, message:'<p>第一行</p><p>第二行</p>', })。然后在CSS样式中给<p>标签添加text-align: center;属性来实现居中。

2- 在this.$message.error的参数中使用数组来表示多行消息，并且设置dangerouslyUseHTMLString: true属性，
例如this.$message.error({ dangerouslyUseHTMLString: true, message:['<div style="text-align: center;">第一行</div>', '<div style="text-align: center;">第二行</div>'].join(''), })。这样可以在每一行的<div>标签中设置居中样式。、

3- 在this.$message.error的参数中使用自定义的类名来表示多行消息，并且设置dangerouslyUseHTMLString: true属性，
例如this.$message.error({ dangerouslyUseHTMLString: true, message:'<div class="my-message"><span>第一行</span><br><span>第二行</span></div>', })。然后在CSS样式中给.my-message span添加display: block; text-align: center;属性来实现换行和居中。