confirm弹框内容如何换行?

您所在的位置：网站首页 › 京东华东配送中心在哪里 › confirm弹框内容如何换行?

confirm弹框内容如何换行?

2023-11-07 05:52| 来源: 网络整理| 查看: 265

今天做一个需求发现confirm里的换行实现不了，一路上找了很多方法踩了很多坑都解决不了，最终偶然发现了一个属性解决掉了，下面把我踩的坑总结一下总结一下换行方法，来源于网上可自行实践。

1、\u000d 方法

加\u000d confirm("第一行 \u000d 第二行");

2、\r 方法

加 \r —— 注意：\r 适用于谷歌浏览器 confirm("第一行 \r 第二行");

3、 \n 方法

加 \n —— 注意：\n 适用于通用浏览器 confirm("第一行 \n 第二行");

4、 \n\r 或 \r\n 方法

加 \n\r —— 注意：一般情况下使用\n\r confirm("第一行 \n\r 第二行");

5、element-ui中的换行方法

// 把换行的内容分成数组放入 confirmText 中 const confirmText = [‘第一行’ , ‘第二行’]； const newDatas = []； const h = this.createElemnet； for ( confirmText ) newDatas.push(h(′ p ′ , null , confirmText [ i ] ) ) ； this .createElement； for (const i in confirmText) { newDatas.push(h('p', null, confirmText[i]))； } this.createElement；for(constiinconfirmText)newDatas.push(h( ′ p ′ ,null,confirmText[i]))；this.confirm( ‘提示’, { title: ‘提示’, message: h(‘div’, null, newDatas), showCancelButton: true, // 是否显示取消按钮 distinguishCancelAndClose: true, // 是否将取消（点击取消按钮）与关闭（点击关闭按钮或遮罩层、按下 ESC 键）进行区分 closeOnPressEscape: true, // 是否可通过按下 ESC 键关闭 MessageBox confirmButtonText: ‘确定’, // 确定按钮的文本内容 cancelButtonText: ‘取消’, // 取消按钮的文本内容 type: ‘warning’ // 消息类型，用于显示图标 success / info / warning / error } ).then(() => { }) .catch(() => { })

6、模板字符串换行

跟第五种方法相类似，只需要将 ' ' 替换成 ` ` 即可 const confirmText = [`第一行${变量1}` , `第二行${变量1}`]；

重点来了，我用了这么多方法还是解决不了我的问题，我的还是换不了行，因为我也用的element-ui框架,重点用了5,6还是实现不了,不知道是不是element-ui版本的问题，有大神的话麻烦指出来，然后用了一下方法7顺利解决。

7、dangerouslyUseHTMLString属性加入dangerouslyUseHTMLString属性,值给true就可以了,下面直接上例子

let infoTitle = `

确定${switchBtn} ${row.serviceName}自动更新?

以下是自动更新最近执行时间

` let times = '' for(let i = 0, len = res.length; i res[i]}

` } let ellipsis = row.mode === '周期执行'?'

...

':'' let info = infoTitle + times + ellipsis this.$confirm(info, '下次执行时间确认', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', dangerouslyUseHTMLString: true }).then(() => { this.enableTask(val, row) }).catch(err => {}) }).catch(() => {})

注意只有加了该属性才可以解析html,没有该属性html不解析。

【本文地址】

confirm弹框内容如何换行?

confirm弹框内容如何换行?

今日新闻

推荐新闻