在sweetalert2内容中使用vue组件 [英] Using vue component in sweetalert2 content
问题描述
我在 Sweetalert2 模态.org/" rel="noreferrer">Vue 项目.我想在警报中使用自定义组件.例如:
I have a few plain Sweetalert2 modals in a Vue project. I want to use a custom component inside an alert. For example:
<template>
<h1>Hello {{name}}</h1>
</template>
<script>
module.exorts: {
props: ["name"]
}
</script>
my_template.vue
而且,在我的甜蜜模式中:
And, in my sweetalert modal:
swal({
titleText: "Hi",
html: '<my-template name="hello"></my-template>'
});
我不确定这是否可能或如何做到.
I'm not sure if this is even possible or how to do it.
推荐答案
技术上看起来是可能的:
Technically it looks possible:
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>'
})
})
但是你可能想把它包装在一个函数中.看看我的小提琴:
But you may want to wrap it in a function. Take a look at my fiddle:
这只是一个想法,对我来说它看起来不太好,但仍然有效.另外我必须提到,每次以这种方式打开对话框时,您都会创建新的 vue 实例.
It's just an idea, for me it doesn't look good, but still working. Also I have to mention, that you will create new instance of vue every time you open your dialog this way.
选项 2 从评论到我的回答:
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
swal({
html: "<my-component></my-component>"
})
new Vue({
el: swal.getHtmlContainer()
})
这篇关于在sweetalert2内容中使用vue组件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!