stxdlg - Vue 对话框管理器

简化的 Vue 对话框管理器：

• 编程式创建：使用 DialogManager.create() 方法（推荐）
• 声明式支持：提供 <stx-dialog> 组件类型定义

安装

npm install stxdlg

快速开始

方法1：编程式创建（推荐）

import DialogManager from 'stxdlg';
import MyDialogComponent from './MyDialog.vue';

// 创建对话框
const dialog = DialogManager.create(
  'my-dialog',
  MyDialogComponent,
  { title: 'Hello', message: 'World' },
  { duration: 5000 }
);

// 显示对话框
dialog.show();

// 设置数据
DialogManager.setData('my-dialog', { message: 'Updated!' });

// 关闭对话框
dialog.hide();

方法2：全局注册（Vue 插件）

import { createApp } from 'vue';
import App from './App.vue';
import { StxDialogPlugin } from 'stxdlg';

const app = createApp(App);

// 安装插件
app.use(StxDialogPlugin);

app.mount('#app');

方法3：全局注册（Vue 插件）

import { createApp } from 'vue';
import App from './App.vue';
import { StxDialogPlugin } from 'stxdlg';

const app = createApp(App);

// 安装插件
app.use(StxDialogPlugin);

app.mount('#app');

API 文档

DialogManager（编程式）

// 创建对话框
DialogManager.create(name: string, component: Component, props?: DialogData, config?: DialogConfig): DialogInstance

// 显示对话框
DialogManager.show(name: string): void

// 关闭对话框
DialogManager.close(name: string): void

// 设置数据
DialogManager.setData(name: string, data: DialogData): void

// 销毁对话框
DialogManager.destroy(name: string): void

// 获取实例
DialogManager.getInstance(name: string): DialogInstance | undefined

StxDialog（组件类型定义）

<stx-dialog
  name="dialog-name"           // 必需：对话框名称
  :component="DialogComponent"  // 必需：Vue组件
  :props="{}"                  // 可选：传递给组件的props
  :config="{}"                // 可选：对话框配置
/>

注意： StxDialog 组件主要用于提供类型定义，实际推荐使用 DialogManager.create() 编程式 API。

类型定义

interface DialogConfig {
  duration?: number;
  closeCallback?: () => void;
}

interface DialogData {
  [key: string]: any;
}

interface DialogInstance {
  readonly $el: HTMLElement | null;
  readonly visible: boolean;
  readonly closed: boolean;
  unmount(): void;
  show(): DialogInstance;
  hide(): DialogInstance;
  setData(data: DialogData): DialogInstance;
  destroy(): void;
}

架构说明

简化后的架构特点：

• 统一使用 DialogManager.create() 编程式 API
• 移除冗余的 StxDialogManager 别名
• 专注于单一、清晰的编程式创建方式
• 减少代码冗余，提高可维护性

推荐使用方式：

// 推荐：直接使用 DialogManager
import DialogManager from 'stxdlg';

// 或者使用插件全局注册
import { StxDialogPlugin } from 'stxdlg';
app.use(StxDialogPlugin);

## 示例

查看 `examples/` 目录下的完整示例代码。

## 浏览器兼容性

- Vue 3.x
- 现代浏览器（支持 ES6+）

## 许可证

MIT