自定义组件 iside vue js 对话框

Question

赏金将在 7 天后到期。 此问题的答案有资格获得+300声望奖励。 雅各布想引起更多人对这个问题的关注。

我正在使用这个 vue js 插件： https : //github.com/Godofbrowser/vuejs-dialog

按照指南，我正在尝试将自定义组件集成到我的对话框中。 对话框显示但不显示任何内容或自定义组件。 此外，该配置似乎不起作用。

我在这里错过了什么吗？ 我遵循了文档。

这是我的main.js的内容：

import VuejsDialog from 'vuejs-dialog';
import 'vuejs-dialog/dist/vuejs-dialog.min.css';

Vue.use(VuejsDialog);

import CustomView from '@/components/HDSLogin';
const customView = 'my-unique-view-name';
Vue.dialog.registerComponent(customView, CustomView)

然后我在我的组件中使用以下方法来触发对话框

this.$dialog.alert( {
    view: customView, // can be set globally too, value is 'my-unique-view-name'
    html: false,
    animation: 'fade',
    okText: "Ok",
    cancelText: "Cancel",
    backdropClose: true
});

我在HdsLogin.vue 中定义了我的CustomView组件：

<template>
    <div >
        <p>Content</p>
    </div>
</template>

<script>
// import into project
import Vue from 'vue';
import VuejsDialog from 'vuejs-dialog';
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js'; // only needed in custom components
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
Vue.use(VuejsDialog);

export default {
  mixins: [VuejsDialogMixin],
};
</script>

<style scoped="">
button {
  width: 100%;
  margin-bottom: 10px;
  float: none;
}
</style>

通过上述设置，将显示一个空白对话框：

Answer 1

这个远不容易发现。 但是您在示例之后犯了一个小错误。

this.$dialog.alert()有 2 个参数，它的定义是：

Plugin.prototype.alert = function (message = null, options = {}) {
    message && (options.message = message)
    return this.open(DIALOG_TYPES.ALERT, options)
}

因此，您必须在定义options之前定义第一个参数（例如null ）。

您的呼叫应如下所示：

-  this.$dialog.alert( {
+  this.$dialog.alert(null, {
        view: customView, // can be set globally too
        html: false,
        animation: 'fade',
        okText: "123 cdasd",
        cancelText: "31 dsad",
        backdropClose: true
      });

此外，您可能不需要HdsLogin组件中的所有这些导入。