前端在this.$message.error中实现换行或居中的操作
换行:
1- 在this.$message.error的参数中使用\n
字符来表示换行,
例如this.$message.error('第一行\n第二行')
。
2- 在this.$message.error的参数中使用
标签来表示换行,并且设置dangerouslyUseHTMLString: true
属性,
例如this.$message.error({ dangerouslyUseHTMLString: true, message:'第一行
。
第二行', })
3- 在this.$message.error的参数中使用数组来表示多行消息,并且设置dangerouslyUseHTMLString: true
属性,
例如this.$message.error({ dangerouslyUseHTMLString: true, message:['第一行', '第二行'].join('
。
') })
———————————————————————————————————————————————————————
居中:
也是同理于换行操作,主要是设置这个dangerouslyUseHTMLString属性,让这里面的文本可以被html格式编辑,由于markdown的某些bug,先写在代码块里1- 在this.$message.error的参数中使用<p>标签来表示换行,并且设置dangerouslyUseHTMLString: true属性,例如this.$message.error({ dangerouslyUseHTMLString: true, message:'第一行
第二行
', })。然后在CSS样式中给<p>标签添加text-align: center;属性来实现居中。2- 在this.$message.error的参数中使用数组来表示多行消息,并且设置dangerouslyUseHTMLString: true属性,例如this.$message.error({ dangerouslyUseHTMLString: true, message:['第一行', '第二行'].join(''), })。这样可以在每一行的<div>标签中设置居中样式。、3- 在this.$message.error的参数中使用自定义的类名来表示多行消息,并且设置dangerouslyUseHTMLString: true属性,例如this.$message.error({ dangerouslyUseHTMLString: true, message:'第一行
第二行', })。然后在CSS样式中给.my-message span添加display: block; text-align: center;属性来实现换行和居中。