在 sweetalert2 内容中使用 vue 组件答案

【问题标题】：Using vue component in sweetalert2 content在 sweetalert2 内容中使用 vue 组件
【发布时间】：2018-02-08 10:35:47
【问题描述】：

我在 Vue 项目中有一些简单的 Sweetalert2 模态。我想在警报中使用自定义组件。例如：

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

my_template.vue

而且，在我的甜蜜模式中：

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

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

【问题讨论】：

标签： javascript vue.js sweetalert2

【解决方案1】：

技术上看起来是可行的：

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>'
  })
})

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

JS Fiddle

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

选项 2 从评论到我的回答：

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

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

Fiddle

【讨论】：

或者，更好的是：html: '<my-component></my-component>'，然后是new Vue({ el: swal.getContent() })
@LimonMonte 感谢您的想法。如果您不介意，我已将其添加到我的答案中。
@KirillStepanov 在现实情况下，我们的应用到处都是数据绑定。这个解决方案是关于创建一个新的 Vue 对象并使其渲染 $swal.html，但是数据绑定不起作用.... :( 顺便说一下，Limon Monte 是 sweetalert2 的所有者。
@JustinMoh 我同意，但我们不知道问题的背景。我认为将 vue 实例中的属性传递给渲染组件仍然是可能的。但我不知道为什么不只使用模板文字。对此使用 vue 没有任何好处。
@KirillStepanov 我目前使用的html: '<div id="swalHtml"></div>'，然后在onBeforeOpen: 中，使用let ComponentClass = Vue.extend(MyComponent); let instance = new ComponentClass({ propsData: { item: this.item } }) 在上下文中扩展vue 组件，然后将其挂载到dom instance.$mount(); document.getElementById('swalHtml').appendChild(instance.$el)。跨度>

【解决方案2】：

您可以在应用内呈现和隐藏内容：

<div id="swalHTML" style='display: none'>
  <my-template name="hello"></my-template>
</div>

然后将元素的 innerHTML 传递给警报：

let el = document.getElementById('swalHTML')
swal({
  html: el.innerHTML
});

【讨论】：

【解决方案3】：

我已经设法使它工作如下：

我在反引号之间包含了模板的所有逻辑：` `

您还需要编辑 vue.config.js 文件并在 configurewebpack 对象中添加：'vue$':'vue/dist/vue.esm.js'

configureWebpack: {
resolve: {
  alias: {
    'src': resolveSrc('src'),
    'chart.js': 'chart.js/dist/Chart.js',

    // add this line for include components inside swal alert
    'vue$':'vue/dist/vue.esm.js'
  }
 }
}

完成此操作后，您必须重新启动项目“npm run dev”

这是我的完整示例，经过测试和工作

openSweet() {
  Vue.component('my-comp', {
      template: `
            <div class="card-content">
              <div class="span2">
                    <div class="col-sm-6 col-md-2 col-lg-3">
                        <div class="row">
                          <div style="margin-top: 6px;" >
                            <p-switch v-model="switchTrip.state" type="primary" 
on-text="ON" off-text="OFF" style="justify-content:center"></p-switch>
                            <h5 class="card-title" style="margin-left: 
25px;">Recorridos</h5>
                          </div>
                        </div>

                        <div class="row">
                          <div style="margin-top: 6px;" >
                            <p-switch v-model="switchVel.state" type="primary" 
on-text="ON" off-text="OFF" style="justify-content:center"></p-switch>
                            <h5 class="card-title" style="margin-left: 
25px;">Velocidad</h5>
                          </div>
                        </div>

                    </div>
              </div>
              <div class="span2">
                    <div class="col-sm-6 col-md-4 col-lg-3">
                        <div class="row">
                          <div >
                            <input type="search" class="form-control input-sm" 
placeholder="km / h" v-model="vmax">
                            <h5 class="card-title">Vel. Max</h5>
                          </div>
                        </div>

                        <div class="row">
                          <div>
                            <input type="search" class="form-control input-sm" 
placeholder="minutos" v-model="tol">
                            <h5 class="card-title">Tolerancia</h5>
                          </div>
                        </div>
                    </div>
              </div>
            </div>
      `,
    data () {
      return {
        switchVel: {
          state: false
        },
        switchEvent: {
          state: false
        },
        switchTrip: {
          state: false
        },
        search: '',
        vmax: '',
        tol: ''
      }
    },
    components: {
        [Button.name]: Button,
        Card,
        PSwitch
    }
  })
  new Vue({
    el: '#modal',
    beforeCreate:  () => {
      swal({
        titleText: "Descarga de Reportes",
        showCancelButton: true,
        cancelButtonText: 'Cancelar',
        confirmButtonText: 'Descargar',
        // confirmButtonAriaLabel: 'glyphicon glyphicon-ok-sign',
        // cancelButtonAriaLabel: 'glyphicon glyphicon-remove-sign',
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        width: 800,
        html: '<div id="modal"><my-comp></my-comp></div>'
      })
    }
  })
}

希望对你有帮助

问候

【讨论】：