Vue.js项目中vue-swal弹窗内HTML代码无法正常渲染问题咨询

云上老周

2026-9-24

vue-swal 弹窗HTML无法渲染问题解决

问题成因

安全限制：vue-swal默认关闭HTML渲染能力，所有传入的标签会被自动转义为纯文本，避免XSS注入风险。
参数不兼容：你使用的配置是新版SweetAlert2的参数规则，而npm的vue-swal包基于旧版SweetAlert1封装，二者参数逻辑不同：
1. 旧版中html是布尔类型的开关参数，不是HTML内容的传入字段
2. 旧版默认title和text字段都仅支持纯文本，必须开启HTML开关才会解析标签。

解决方案

调整配置参数，先开启HTML解析开关，再把弹窗内容传入到text字段即可，修改后代码如下：

this.$swal({
  title: '<i>Custom HTML</i>',
  // 开启HTML解析权限
  html: true,
  // HTML内容传入text字段
  text: `This is an <em> emphasized text </em>, <a href="#">links</a><strong>And other tags</strong>`,
  showCloseButton: true,
  showCancelButton: true,
  focusConfirm: false,
});