8.$confirm,$alert,$message展示換行

需求:正常 this.$message.success(message) 展示的内容是放在一起的,哪怕 message 分行了,也是放在一起,现在需要将message内容换行。

思路:通过设置 dangerouslyUseHTMLString 属性可以让 message 当作 HTML 片段处理

  let message = "";
  res.data.resultValue.tips.forEach((item) => {
    message = message + item + "<br/>";
  });
  this.$message({
    dangerouslyUseHTMLString: true,
    message,
    type: "success",
  });

拓展:$confirm 和 $alert 也可以通过 dangerouslyUseHTMLString 属性换行

  arr.forEach((item, index) => {
    if (index === 0) return;
    newInfo = newInfo + "机组名称" + item + "<br />";
  });
  this.$confirm(newInfo, "确定以下机组修改参数?", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
    dangerouslyUseHTMLString: true,
  });

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
在使用this.$confirm进行换行时,可以使用$createElement来创建多个p标签,并将它们包裹在一个div标签中。例如,可以使用以下代码进行换行: ``` const h = this.$createElement; this.$confirm('提示', { title: '提示', message: h('div', [ h('p', '是否将该账号密码重置为初始密码?'), h('p', '成功后将密码设为默认密码,默认密码为用户账号') ]), confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', }) .then(() => { resetPasswords(params).then((res) => { if (res.code == 200) { this.$message.success('重置密码成功'); } }); }) .catch(() => { this.$message({ type: 'info', message: '已取消重置密码', }); }); ``` 这样可以在确认框中显示多行文本。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue this.$confirm中提示的文字换行](https://blog.csdn.net/weixin_45799001/article/details/125086460)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [confirm提示多行内容时换行问题](https://blog.csdn.net/qq_43432057/article/details/116981331)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [js使用小技巧](https://download.csdn.net/download/qq_17486363/7619983)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值