AutoDialog：一套轻量跨框架的弹窗神器

介绍

当项目只需要一两个对话框，却不得不引入整套 UI 组件库时，开发体验会瞬间变得沉重。autodialog.js 的目标很直接：提供一个纯 JavaScript 的 Dialog 核心，让原生 HTML、Vue、React 甚至 Svelte、Solid 都能用同一套调用方式弹出对话框，同时保留各自框架的状态与样式能力。

解决核心痛点

• 引入成本过高：无需绑定 Ant Design、Element 这类重型库，一个包即可覆盖常见弹窗诉求。
• 样式难以定制：AutoDialog 只负责遮罩与基础动画，具体外观完全交给你的组件，避免了 !important 的覆盖大战。
• 生态割裂：相同的设计稿在 Vue/React 中可以复用同一份业务组件，不再担心多端实现不一致。
• 框架绑定深：通过适配器解耦渲染层，真正做到“在任何框架里写一次业务组件，然后随处调用”。

原理解析

AutoDialog 的核心是一个基于适配器（Adapter）的渲染层抽象：

export interface Adapter {
  render: (content: any, options: { container: HTMLElement; panel: HTMLElement; [key: string]: any }) => void
  unmount?: (panel: HTMLElement) => void
}

• 自动识别内容类型：核心包会先匹配用户注册的自定义适配器，再根据组件特征自动选择内置的 HtmlAdapter、VueAdapter 或 ReactAdapter。
• 适配器可插拔：如果需要支持 Svelte/Solid，只需实现一个熟悉的挂载逻辑，并通过 Dialog.registerAdapter 注册即可。
• 单例 + 多例并存：默认导出单例 autodialog 满足简单场景，也可以实例化 Dialog 类以便更精细地控制多个独立弹窗。

Demo 使用

最基本的调用只需要一行代码：

import autodialog from 'autodialog.js'
autodialog.show('<div>Hello World!</div>')

在 Vue / React 中依旧保持同一种 API：

// Vue 3
autodialog.show(MyDialogVue, {
  props: { title: '你好 Vue' }
})

// React 18+
autodialog.show(MyDialogReact, {
  props: { message: '你好 React' }
})

常用选项包括：

• title：可选标题文字。
• props：传递给组件的参数。
• showMask / allowScroll：控制遮罩与页面滚动。
• animation / animationClass / animationDuration：自定义动效。
• onBeforeOpen / onOpened / onBeforeClose / onClosed / onMaskClick：生命周期钩子。

如果需要扩展到 Svelte：

import { Dialog } from 'autodialog.js'
import { mount } from 'svelte'

const SvelteAdapter = {
  render(Component, { panel, props = {}, onClose }) {
    const inst = mount(Component, { target: panel, props: { ...props, onClose } })
    panel.__svelte__ = inst
  },
  unmount(panel) {
    panel.__svelte__?.destroy?.()
    delete panel.__svelte__
  },
}

Dialog.registerAdapter({ name: 'svelte', adapter: SvelteAdapter })

设计理念

• 框架独立：核心逻辑不依赖任何前端框架，确保包体轻量、依赖简单。
• 可扩展性：适配器机制让任何渲染系统都能通过最少代码接入。
• 用户主导：样式、动画、生命周期全部开放，开发者可以保持团队既有设计体系。

结语

AutoDialog 像是一把“轻便瑞士军刀”，让最常用的 Dialog 功能回归简单：一套 API，在任何框架里调用自如。想告别重型组件库、保留各自技术栈的自由度，不妨试试 autodialog.js（GitHub：Auto-Plugin/autodialog.js，npm 同名包），给你的 UI 工具箱添一件趁手的家伙。