vue中的this.message提示框换行（二十四）

1、搜索关键词

vue提示this.$message换行

vue提示this.$message设置样式

vue字符串替换（因为在提示框中要显示的是录入生成的参数（json形式），需要粘贴出来给xxljob系统作为任务调度的入参，所以觉得设置换行会友好一点，而且监控项目原生的this,message提示只有一行并且显示不全，相当之不友好）。

2、vue字符串替换

vue 把字符串的所有=替换成&&&的方法
//把字符串中所有=换成&&&
let reg=new RegExp('=','g')//g代表全部
let newMsg=JSON.stringify(msg).replace(reg,'&&&');
console.log(newMsg)

const reg = new RegExp('",', 'g');// g代表全部
const xxlJobParams = JSON.stringify(this.childModuleObj).replace(reg, '",<br/>');

改造前：
{"accperiod":"","dayPayCodeEnd":"","dayPayCodeStart":"","magic":"","treatyIds":""}
加上<br/>之后：
{"accperiod":"",<br/>
"dayPayCodeEnd":"",<br/>
"dayPayCodeStart":"",<br/>
"magic":"",<br/>
"treatyIds":""}
页面提示：
{"accperiod":"abc",
"dayPayCodeEnd":"abc",
"dayPayCodeStart":"abc",
"magic":"eqwew,werwer,wer,wer,wer,wer",
"treatyIds":"abc"}

3、方式一

this.$message({
    type: 'info',
    message: xxlJobParams
});

效果：

4、方式二 

this.$message({
    type: 'info',
    dangerouslyUseHTMLString: true,
    message: xxlJobParams
});

效果：

 方式一和方式二均不好使，加上<br/>之后，显示不全了，最后是...

参看链接：

https://www.cnblogs.com/coderwhytop/p/14524800.html

https://www.cnblogs.com/wangxiaoer5200/p/11491816.html

let arr = ['测试一', '测试二', '测试三'];
      let str = arr.join(' <br/> ');
      this.$message({
        dangerouslyUseHTMLString: true,
        message: str,
        type: 'warning'
});
使用上面简单的属性        dangerouslyUseHTMLString: true,就可以实现换行；

5、方式三

this.$msgbox({
    title: '参数列表',
    message: xxlJobParams,
    dangerouslyUseHTMLString: true,
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消'
}).then(action => {
    this.$message({
        type: 'info',
        message: 'action: ' + action
    });
}).catch((e) => {
    console.log('生成参数列表失败', e);
});

效果：

 可以去掉.then

不加.catch报如下错误：

:9527/#/accountChecking/xxlJobInfo:1 Uncaught (in promise) cancel Promise.then (async) confirm @ index.vue?95f2:92 invokeWithErrorHandling @ vue.runtime.esm.js:1854 invoker @ vue.runtime.esm.js:2179 original._wrapper @ vue.runtime.esm.js:6917