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
如果错过太阳时你流了泪,那你也要错过群星了。
在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。
在所有的矛盾中,要优先解决主要矛盾,其他矛盾也就迎刃而解。
不要做个笨蛋,为失去的郁郁寡欢,聪明的人,已经找到了解决问题的办法,或正在寻找。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了