autodialog.js_一个轻量、框架无关的弹窗系统

Web前端开发网

fly63.com

首页资源工具文章教程栏目

autodialog.js

GitHub:https://github.com/Auto-Plugin/autodialog.js

网站描述:一个轻量、框架无关的弹窗系统

GitHub

autodialog 是一个框架无关的弹窗系统，核心仅依赖原生 dom。默认内置 vue、react、html 适配器，并支持用户注册自定义框架适配器（如 Svelte、Solid 等）

特性

框架无关：核心完全基于原生 DOM，无需依赖任何框架。
内置适配器：支持 Vue、React、HTML。
可扩展适配器：可轻松集成 Svelte、Solid、Lit、Qwik 等框架。
内置基础动画：支持进入 / 离开过渡。
最小化样式：只包含布局和基础动画，用户可完全自定义样式。
完整生命周期钩子：支持 onBeforeOpen、onOpened、onBeforeClose、onClosed、onMaskClick。

安装

npm install autodialog.js
# 或者
pnpm add autodialog.js
# 或者
yarn add autodialog.js

可选的 peer 依赖

如果你需要使用内置的 Vue 或 React 适配器，请确保你的项目已经安装：

"peerDependencies": {
  "vue": ">=3.0.0",
  "react": ">=18.0.0",
  "react-dom": ">=18.0.0"
}

Autodialog 不会自动安装这些框架，它只会与宿主项目中的版本共享使用。

使用示例

原生 HTML

import autodialog from 'autodialog.js'

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

Vue 3

import autodialog from 'autodialog.js'
import MyDialog from './MyDialog.vue'

autodialog.show(MyDialog, {
  props: { title: '你好 Vue' },
  animationDuration: 250
})

React 18+

import autodialog from 'autodialog.js'
import MyDialog from './MyDialog.tsx'

autodialog.show(MyDialog, {
  props: { message: '你好 React' }
})

自定义适配器（例如 Svelte）

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

export const SvelteAdapter = {
  render(Component: any, { panel, props = {}, onClose }: any) {
    const instance = mount(Component, {
      target: panel,
      props: { ...props, onClose }
    })
    ;(panel as any).__svelte__ = instance
  },
  unmount(panel: HTMLElement) {
    const inst = (panel as any).__svelte__
    inst?.destroy?.()
    delete (panel as any).__svelte__
  }
}

// ✅ 注册自定义适配器（detect 可省略）
Dialog.registerAdapter({
  name: 'svelte',
  adapter: SvelteAdapter
})

现在可以直接这样调用：

import MyDialog from './MyDialog.svelte'
autodialog.show(MyDialog, { props: { text: '来自 Svelte 的弹窗 ' } })

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4797

more>>