在 sweetalert2 内容中使用 vue 组件

我有几个简单的甜蜜警报2a 中的情态动词Vue项目。我想在警报中使用自定义组件。例如：

<template>
  <h1>Hello {{name}}</h1>
</template>
<script>
module.exorts: {
  props: ["name"]
}
</script>

my_template.vue

并且，在我的 sweetalert 模式中：

swal({
  titleText: "Hi",
  html: '<my-template name="hello"></my-template>'
});

我不确定这是否可能或如何做到。

从技术上讲，它看起来是可能的：

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

new Vue({
  el: '#modal',
  beforeCreate:  swal({
    titleText: "Hi",
    html: '<div id="modal"><my-component></my-component></div>'
  })
})

但您可能想将其包装在一个函数中。看看我的小提琴：

JSFiddle

这只是一个想法，对我来说它看起来不太好，但仍然有效。我还必须提到，每次以这种方式打开对话框时，您都会创建新的 vue 实例。

Option 2从评论到我的回答：

Vue.component('my-component', {
    template: '<div>A custom component!</div>'
})    

swal({
    html: "<my-component></my-component>"
})
  
new Vue({
    el: swal.getHtmlContainer()
})  
 

Fiddle