# @fylgja/alpinejs-dialog 中文文档

规范地址：https://npmcn.com/package/%40fylgja/alpinejs-dialog/

版本：2\.3\.0
npm 元数据更新时间：2026-06-08T10:52:54.062Z
中文译文更新时间：2026-11-15T20:00:30.221Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40fylgja/alpinejs-dialog
原文对照：https://npmcn.com/package/%40fylgja/alpinejs-dialog/?lang=original
项目主页：https://fylgja.dev/
源码仓库：https://github.com/fylgja/alpinejs-dialog

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：32 kB，15 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2022-09-15T20:10:43.003Z
- 最新版本发布：2026-06-08T10:52:53.934Z
- 近 30 天下载量：3223（2026-10-16 至 2026-11-14，npm 官方下载统计）
- 已发布版本数：13（近 12 个月 1 个）

## 中文简介

将 AlpineJs 的力量带入 HTML 对话框

## 安装

```sh
npm install @fylgja/alpinejs-dialog
```

也可以使用：`pnpm add @fylgja/alpinejs-dialog`、`yarn add @fylgja/alpinejs-dialog`、`bun add @fylgja/alpinejs-dialog`

## README

# Fylgja - AlpineJS 对话框

[![NPM version](https://img.shields.io/npm/v/@fylgja/alpinejs-dialog?logo=npm)](https://www.npmjs.com/package/@fylgja/alpinejs-dialog) [![License](https://img.shields.io/github/license/fylgja/alpinejs-dialog?color=%23234)](https://npmcn.com/LICENSE) [![Netlify Status](https://api.netlify.com/api/v1/badges/f6d1c1a3-2365-4d56-aeb4-ec52bcc7c1b6/deploy-status)](https://alpinejs-dialog.netlify.app/)

将Alpine.js的力量和简洁带入本地的 HTML `<dialog>` 键.

**现场德莫:** [https://alpinejs-dialog.netlify.app/ (中文(简体) )](https://alpinejs-dialog.netlify.app/)

## 安装

您可以使用此插件, 要么使用国家防范机制安装, 要么从CDN 中包含 .

### 国家预防机制

你可以从国家防范机制安装,并将其纳入你的捆绑:

```bash
npm install @fylgja/alpinejs-dialog
```

```js
import Alpine from 'alpinejs';
import dialog from '@fylgja/alpinejs-dialog';

window.Alpine = Alpine;

Alpine.plugin(dialog);
Alpine.start();
```

### 维娅 CDN

您可以将此插件的 CDN 版本包含为 `<script>` 标签, 一定要在阿尔平杰斯之前列入.

```html
<script defer src="https://unpkg.com/@fylgja/alpinejs-dialog/dist/index.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
```

## 使用量

利用 `x-htmldialog` 插件,将指令添加到 HTML `<dialog>` 也由 `x-show`。 。 。 .

```html
<div x-data="{ open: false }">
    <button @click="open = !open">Open</button>
    <dialog x-show="open" x-htmldialog="open = false">..</dialog>
</div>
```

当 `x-htmldialog` 指令存在于 `x-show` 元素 :

-   它能防止 `x-show` 从直接显示样式.
-   相反,它使用当地人 `el.showModal()` 函数以显示对话框.
-   提供给 `x-htmldialog` (例如, `"open = false"`已执行 当对话框关闭时,按下 Escape 键或单击对话框(背景)外.

### 修改器

这个 `x-htmldialog` 指令支持修饰者进一步自定义其行为.

#### `noscroll`

这个 `noscroll` 修改器在对话框打开时防止在背景页面上滚动 .

```html
<div x-data="{ open: false }">
    <button @click="open = !open">Open</button>
    <dialog x-show="open" x-htmldialog.noscroll="open = false">..</dialog>
</div>
```

#### `closeby`

这个 `closeby` 选项可以让您对对话框如何解析进行精细控制。 插件为尚未在本地支持它的浏览器填充此行为 .

您可以以两种方式设置此选项:

**1\. 构成国际法的属性 `<dialog>` 元素 :**

```html
<dialog closeby="any" ...>
```

**2\. 作为修改案文 `x-htmldialog` 指令 :**

```html
<dialog x-htmldialog.closeby.any ...>
```

#### 可用选项

-   **`any`**:对话框可以通过任何用户动作关闭,例如按下 `ESC` 键或点击背景.
-   **`closerequest`**: (默认) 对话框可以通过 `ESC` 键或“近端请求”(例如,提交表与 `method="dialog"`) (中文(简体) ). 点击背景不会关闭.
-   **`none`**:用户无法关闭对话框 。 它必须在方案上关闭.

#### `modeless`

这个 `modeless` 修改器打开对话框作为非模式对话框,使用 `el.show()` 改为 `el.showModal()`。这意味着它不会阻断与页面其余部分的互动,也不会造成背景.

```html
<dialog x-htmldialog.modeless ...>
```

## 常见问题

### @fylgja/alpinejs-dialog 是什么？

将 AlpineJs 的力量带入 HTML 对话框

### 如何安装 @fylgja/alpinejs-dialog？

在项目目录运行 npm install @fylgja/alpinejs-dialog，或使用 pnpm add / yarn add / bun add。

### @fylgja/alpinejs-dialog 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/fylgja\_\_alpinejs-dialog 是否存在。

### @fylgja/alpinejs-dialog 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fylgja/alpinejs-dialog 可以商用吗？

@fylgja/alpinejs-dialog 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @fylgja/alpinejs-dialog 的下载量有多少？

根据 npm 官方下载统计，@fylgja/alpinejs-dialog 在 2026/10/16 – 2026/11/14 这 30 天内被下载 3,223 次，日均约 107 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @fylgja/alpinejs-dialog 还在维护吗？

最新版本 2\.3\.0 发布于 2026/06/08（5 个月前）；至今共发布 13 个版本，其中过去 12 个月发布了 1 个；首次发布于 2022/09/16。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。