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