vue中的this.message提示框换行(二十四)

时间:2021-09-15
本文章向大家介绍vue中的this.message提示框换行(二十四),主要包括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
如果错过太阳时你流了泪,那你也要错过群星了。
在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。

原文地址:https://www.cnblogs.com/szrs/p/15272537.html