Angular自定义指令生成的QRcode无法在SweetAlert2弹窗中显示求助

这个问题很常见，原因在于SweetAlert2的弹窗内容是动态插入到DOM中的，而自定义指令（不管是Vue指令还是你自己写的原生JS指令）通常只会在页面初始渲染或者框架的响应式更新时自动生效，动态插入的HTML不会被指令的初始化逻辑处理到——这就是为什么你在弹窗外能用，弹窗里不行的原因。

下面给你两种针对性的解决方案，根据你的技术栈选择：

方案一：如果你用的是Vue框架的自定义指令 #

你需要手动将Vue的指令绑定到弹窗里的元素上，或者直接挂载一个QRcode组件：

Swal({
  title: 'HTML <small>QR Code</small>!',
  html: '<div id="qrcode-wrapper"></div>'
}).then(() => {
  // 情况1：如果你有封装好的QRcode组件
  const qrcodeInstance = new Vue({
    render: h => h('qrcode', {
      props: {
        text: 'https://your-target-url.com' // 替换成你的二维码内容
      }
    })
  }).$mount('#qrcode-wrapper');

  // 情况2：如果你用的是自定义指令v-qrcode
  const wrapperEl = document.getElementById('qrcode-wrapper');
  // 手动调用指令的绑定逻辑
  Vue.directive('qrcode').bind(wrapperEl, {
    value: 'https://your-target-url.com' // 二维码内容
  });
});

方案二：如果你用的是原生JS自定义指令 #

假设你初始化QRcode的函数是initQrcode(element)，那只需要在弹窗渲染完成后，找到对应的元素并手动调用初始化函数：

Swal({
  title: 'HTML <small>QR Code</small>!',
  html: '<qrcode id="popup-qrcode"></qrcode>'
}).then(() => {
  const qrcodeEl = document.getElementById('popup-qrcode');
  if (qrcodeEl) {
    // 调用你的QRcode初始化逻辑，传入元素和配置
    initQrcode(qrcodeEl, {
      text: 'https://your-target-url.com'
    });
  }
});

核心思路就是：等SweetAlert2弹窗完全渲染到DOM后，手动触发自定义指令的初始化流程，这样动态插入的元素就能被正确处理了。

内容的提问来源于stack exchange，提问作者sheeni