Vue.js 组件未显示在 Swal.fire html 中

Question

这是我在 file1.js 中的 Swal.Fire:

import TextModuleComponent from "../components/TextModuleComponent";
export default {
    components: {TextModuleComponent}
}

Swal.fire({

            title: 'Das Angebot per E-Mail versenden?',
            html:
                '<input class="swal2-input" placeholder="Empfänger E-Mail Adresse..." id="email" type="email" ></span>' +
                '<input class="swal2-input" id="header" placeholder="Betreff..." type="text"></span>' +
                '<div><TextModuleComponent ></TextModuleComponent><textarea class="swal2-textarea"></textarea></div>',
            showConfirmButton: true,
            showDenyButton: true,
            confirmButtonText: 'Senden',
            denyButtonText: 'Nein',
            confirmButtonColor: '#2E8B57',
            icon: 'question',
            focusConfirm: false,
            preConfirm: () => ({
                email: $('#email').val(),
                header: $('#header').val()
            }),

这是我的 TextModule 组件：

这是我的输出：

这是浏览器 HTML 输出：

您可以看到，Textmodule 组件已被解释，但未显示。

但我不知道为什么我的 Sweetalert 弹出窗口不显示“测试”。如果我直接在 swal html 中设置“测试”，它会起作用。

编辑

我试过了：

 new Vue({

                 beforeCreate: ()  => {
                     Swal.fire({

                         title: 'Das Angebot per E-Mail versenden?',
                         html:
                             '<input class="swal2-input" placeholder="Empfänger E-Mail Adresse..." id="email" type="email" ></span>' +
                             '<input class="swal2-input" id="header" placeholder="Betreff..." type="text"></span>' +
                             '<div><text-module-component></text-module-component><textarea rows="10"  id="content" placeholder="E-Mail Inhalt..." class="swal2-textarea"></textarea></div>' +
                             '<div style="text-align:left"><i class="material-icons">description</i><label style="font-weight:bold;font-size:140%" class="label-on-left">Anhang</label></div>' +
                             '<div style="text-align:left"><label  style="font-size:110%" class="label-on-left">1 offer#' + object_id + '</label></div>' +
                             '<input class="swal2-file" multiple type="file" id=files>',


                     })
                 }
             })

app.js :

 Vue.component('text-module-component', require('/resources/js/components/TextModuleComponent.vue').default);

错误:

unknown custom element: <textmodulecomponent> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

Sweetalert 弹出窗口仅呈现 HTML。它对 Vue 组件一无所知，因此它们被视为 HTML 元素。您将必须在弹出窗口的 HTML.

上初始化一个 Vue 实例

您应该能够使用 Swal.getHtmlContainer() 获得对弹出窗口正文的引用，因此在显示弹出窗口后尝试类似

new Vue({
    el: Swal.getHtmlContainer()
})

Vue.js 组件未显示在 Swal.fire html 中

Vue.js Compnent doesnt show in Swal.fire html

javascript

vue.js

sweetalert2

这是我在 file1.js 中的 Swal.Fire:

这是我的 TextModule 组件：

这是我的输出：

这是浏览器 HTML 输出：

编辑

app.js :