安装

使用捆绑器（推荐）

如果您使用捆绑程序（例如 Webpack 或 Rollup），则可以像任何其他依赖项一样通过 npm 或 YARN 安装 a11y-dialog：

npmyarn

npm install a11y-dialog

npm install a11y-dialog

yarn add a11y-dialog

yarn add a11y-dialog

然后，您可以在 JavaScript 代码库中导入该库以访问 A11yDialog 类并根据需要实例化您的对话框。

import A11yDialog from 'a11y-dialog'

const container = document.querySelector('#my-dialog-container')
const dialog = new A11yDialog(container)

import A11yDialog from 'a11y-dialog'

const container = document.querySelector('#my-dialog-container')
const dialog = new A11yDialog(container)

如果您依靠 data-a11y-dialog 属性来自动实例化对话框而不需要编写 JavaScript，则可以像这样简化导入：

import 'a11y-dialog'

import 'a11y-dialog'

使用 CDN

如果您更喜欢从 CDN（例如 jsdelivr 或 unpkg）加载 a11y-dialog，则可以通过在 HTML 中添加此脚本标记来实现。它将公开 A11yDialog 全局变量。

jsdeliverunpkg

html

<script
  defer
  src="https://cdn.jsdelivr.net/npm/a11y-dialog@8/dist/a11y-dialog.min.js"
></script>

<script
  defer
  src="https://cdn.jsdelivr.net/npm/a11y-dialog@8/dist/a11y-dialog.min.js"
></script>

html

<script type="module">
  import A11yDialog from 'https://unpkg.com/a11y-dialog@8/dist/a11y-dialog.esm.min.js'

  const container = document.querySelector('#my-dialog-container')
  const dialog = new A11yDialog(container)
</script>

<script type="module">
  import A11yDialog from 'https://unpkg.com/a11y-dialog@8/dist/a11y-dialog.esm.min.js'

  const container = document.querySelector('#my-dialog-container')
  const dialog = new A11yDialog(container)
</script>

安装 ​

使用捆绑器（推荐） ​

使用 CDN ​

安装

使用捆绑器（推荐）

使用 CDN