Vue.js Dialog插件自定义组件集成异常：对话框显示空白且配置无效

看起来你遇到的问题主要是几个配置细节没处理好，我帮你梳理一下并给出修正方案：

问题分析 #

1. 自定义组件内重复初始化VuejsDialog：在HdsLogin.vue里你又重新导入并注册了VuejsDialog，这会和全局注册的实例冲突，导致自定义组件的mixin无法正常关联到全局的对话框实例。

2. 错误使用alert方法加载自定义组件：alert是VuejsDialog提供的简化方法，主要用于显示文本提示，并不支持加载自定义view组件，你需要用open方法来触发包含自定义组件的对话框。

3. 组件内可能未正确引用注册的组件名称：如果你的组件内没有导入main.js里定义的customView变量，直接使用view: customView会导致找不到对应的组件（因为变量未定义），建议直接使用注册时的字符串名称'my-unique-view-name'更稳妥。

修正后的代码 #

1. 简化自定义组件 HdsLogin.vue #

移除组件内重复的Vue和VuejsDialog相关导入，只保留必需的mixin：

<template>
  <div>
    <p>Content</p>
  </div>
</template>
<script>
import VuejsDialogMixin from 'vuejs-dialog/dist/vuejs-dialog-mixin.min.js';

export default {
  mixins: [VuejsDialogMixin],
};
</script>
<style scoped>
button {
  width: 100%;
  margin-bottom: 10px;
  float: none;
}
</style>

2. 修正对话框触发方法 #

改用open方法，并明确指定注册的组件名称：

this.$dialog.open({
    view: 'my-unique-view-name', // 和main.js里注册的名称完全一致
    html: false,
    animation: 'fade',
    okText: "Ok",
    cancelText: "Cancel",
    backdropClose: true
});

3. 确保main.js的注册顺序 #

注册自定义组件必须在Vue.use(VuejsDialog)之后，你的代码顺序是对的，这里再确认一下：

import Vue from 'vue';
import VuejsDialog from 'vuejs-dialog';
import 'vuejs-dialog/dist/vuejs-dialog.min.css';
import CustomView from '@/components/HDSLogin';

Vue.use(VuejsDialog);
const customView = 'my-unique-view-name';
Vue.dialog.registerComponent(customView, CustomView);

额外检查点 #

• 确认自定义组件的路径是否正确：@/components/HDSLogin是否对应实际的文件（注意文件名大小写，部分操作系统区分大小写）。
• 如果你的自定义组件需要和对话框交互（比如触发关闭、确认），可以通过mixin提供的this.$emit('close')或this.$emit('submit')方法来实现。

按上述修改后，应该就能正常显示自定义组件的内容了。

内容的提问来源于stack exchange，提问作者Jacob