# @flourish/popup 中文文档

规范地址：https://npmcn.com/package/%40flourish/popup/

版本：3\.1\.1
npm 元数据更新时间：2026-08-19T18:13:29.342Z
中文译文更新时间：2026-11-15T00:08:45.648Z
软件包许可：BSD-3-Clause

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

原始 npm 页面：https://www.npmjs.com/package/%40flourish/popup
原文对照：https://npmcn.com/package/%40flourish/popup/?lang=original

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

- 包体积（解压后）：63.5 kB，21 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：1 个
- 首次发布：2017-01-10T11:32:57.390Z
- 最新版本发布：2025-01-10T11:51:44.101Z
- 近 30 天下载量：5168（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 0 个）

## 中文简介

弹出 UI 组件

## 安装

```sh
npm install @flourish/popup
```

也可以使用：`pnpm add @flourish/popup`、`yarn add @flourish/popup`、`bun add @flourish/popup`

## README

# 面粉弹出组件

Popup 组件提供了一个可配置的弹出框. 我们开发了用于 [面粉](https://flourish.studio/) 模板, 但这是开源的,你可以用来做任何事情.

```js
import Popup from "@flourish/popup";

var popup = Popup();

// Hide the popup if the user clicks on it
popup.on("click", function() { this.hide(); });

// Draw the popup pointing to position (100, 100)
popup.point(100, 100).draw();
```

它被开发成ES6模块,你可以使用它 [滚出.js](http://rollupjs.org/) 财务报告和审定财务报表 [卷起插孔-节点-溶解](https://github.com/rollup/rollup-plugin-node-resolve), (中文(简体) ), 或另一种ES6相容的模块捆绑器. 或者可以直接从网络中包含文件 :

```html
<script src="https://cdn.flourish.rocks/popup-v1.full.min.js"></script>
```

# 交互式实例

[代码](https://codepen.io/robinhouston/pen/EZXgog)

# 全文参考

-   [构造器](https://npmcn.com/package/%40flourish/popup/#readme-constructor)
-   [方法](https://npmcn.com/package/%40flourish/popup/#readme-methods)
    -   [`.draw()`](https://npmcn.com/package/%40flourish/popup/#readme-draw)
    -   [`.hide()`](https://npmcn.com/package/%40flourish/popup/#readme-update)
    -   [`.on(event, handler)`](https://npmcn.com/package/%40flourish/popup/#readme-on-event-handler)
-   [活动](https://npmcn.com/package/%40flourish/popup/#readme-events)
    -   [这个 `click` 事件](https://npmcn.com/package/%40flourish/popup/#readme-the-click-event)
-   [设置](https://npmcn.com/package/%40flourish/popup/#readme-settings)
    -   [`container`](https://npmcn.com/package/%40flourish/popup/#readme-container)
    -   [`maxWidth`](https://npmcn.com/package/%40flourish/popup/#readme-maxWidth)
    -   [`point`](https://npmcn.com/package/%40flourish/popup/#readme-pointx-y)
    -   [`html`](https://npmcn.com/package/%40flourish/popup/#readme-html)
    -   [`directions`](https://npmcn.com/package/%40flourish/popup/#readme-directions)
    -   [`fallbackFit`](https://npmcn.com/package/%40flourish/popup/#readme-fallbackFit)
-   [样式](https://npmcn.com/package/%40flourish/popup/#readme-style)
-   [属性](https://npmcn.com/package/%40flourish/popup/#readme-properties)
    -   [`version`](https://npmcn.com/package/%40flourish/popup/#readme-version)

## 构造器

`Popup()` 构造一个新的弹出。 可能在同一页上出现几起弹出, 虽然你通常只需要一个。 构造者不采辩.

## 方法

### `.draw()`

绘制或重新绘制弹出来反映其设置的当前值.

### `.hide()`

藏出弹出.

### `.on(event, handler)` 附上事件处理器 。 唯一支持的事件是 [`click`](https://npmcn.com/package/%40flourish/popup/#readme-the-click-event)。您可以附加 同一事件的多个处理者,他们都会酌情开火.

□ 事件

### 这个 `click` 事件

当有人点击弹出时,点击事件会被发射. 事件处理器通过 将鼠标Event作为参数及其 `this` 对象是弹出实例.

## 设置

通过在弹出对象上调用同名方法来应用设置 以新值作为参数。 这些方法返回弹出对象,所以你 可以锁上它们。 例如,您可以设置位置和内容 :

```js
popup.point(100, 50).html("Look at me!");
```

您可以通过调用没有的方法获取设置的当前值 参数,例如:.

```js
var current_point = popup.point();
```

### `container`

用于限制弹出量的DOM元素. 默认为 `document.body`。 。 。 .

### `point`

点是两个位置的阵列 `[x, y]` 这决定了弹出点的位置.

### `point(arr)`

在两个元素阵列中通过x和y位置, `[x, y]`。 。 。 .

### `point(x, y)`

作为方便,您可以将 x 和 y 位置作为单独的参数通过.

### `point(container)`

或者你可以通过一个可见的DOM元素,它把点设置到该元素的中心.

### `html`

弹出的内容.

### `directions`

按优先级顺序排列的一系列方向或指定单一方向的字符串。 弹出将使用第一个列出的方向 允许在其容器内绘制弹出.

支助方向如下:

-   `bottom`:将弹出框下边缘中央的小箭头画出, 所以弹出在点上.
-   `top`:将弹出盒上边缘中央的小箭头画出, 所以弹出在点下.
-   `left`:将弹出箱左侧边缘中央的小箭头画出, 所以弹出在右侧.
-   `right`: 在弹出箱右侧边缘中央取出小箭头, 所以弹出在点的左边.
-   `topLeft`: 在弹出箱左上角画出小箭头, 所以弹出在下方和右边.
-   `bottomLeft`: 在弹出箱左下角画出小箭头, 所以弹出在右上方.
-   `topRight`在弹出箱右上角画出小箭头, 所以弹出点在下方和左侧.
-   `bottomRight`: 在弹出箱右下角画出小箭头, 所以弹出点在左上下方.
-   `bottomFlexible`画出弹出箱底边缘的小箭头, 因此弹出(可能不对称地)位于点上.
-   `topFlexible`画出弹出盒上边的小箭头, 所以弹出量(可能是不对称的)在点下.
-   `leftFlexible`画出弹出盒左手边的小箭头, 因此弹出(可能不对称地)位于点的右边.
-   `rightFlexible`画出弹出箱右边的小箭头, 因此弹出(可能是不对称的)到左边的点.

默认优先权顺序为上列顺序.

### `fallbackFit`

如果弹出无法装入容器, 确定弹出会做什么 使用列出的任何方向。 可能值为 `"horizontal"` (这是默认), `"vertical"`,以及 `null`。 。 。 .

如果无法使用所列方向将弹出物装入容器:

-   如果倒计时 适应是 `"horizontal"`弹出会尽可能限制水平 但允许垂直地重叠其界限.
-   如果倒计时 适应是 `"vertical"`弹出会尽可能限制垂直 ,但允许横向重叠.
-   如果倒计时 适应是 `null`,弹出会登录到控制台的警告并使用第一个列出的方向.

## 样式

您可以使用 CSS 格式化弹出 。 弹出容器有类 `.flourish-popup`, (中文(简体) ), 并包含 `<svg>` 有类的元素 `.flourish-popup-svg` (单位:千美元) `<div>` 与 类 `.flourish-popup-content`。 SVG 包含一个 `<g>` 可样式的元素 来改变弹出框本身的外观,您可以样式化内容 div 以更改弹出中 HTML 的外观.

例如,如果想要在黑色背景上写出白文本,您可以 写 :

```css
.flourish-popup .flourish-popup-svg g { fill: black; }
.flourish-popup .flourish-popup-content { color: white; }
```

如果您想要半透明弹出, 您可以写 :

```css
.flourish-popup .flourish-popup-svg g { opacity: 0.6; }
```

## 属性

### `.version`

`Popup.version` 使用 [语义版本](http://semver.org/)。 。 。 .

## 常见问题

### @flourish/popup 是什么？

弹出 UI 组件

### 如何安装 @flourish/popup？

在项目目录运行 npm install @flourish/popup，或使用 pnpm add / yarn add / bun add。

### @flourish/popup 支持 TypeScript 吗？

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

### @flourish/popup 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @flourish/popup 可以商用吗？

@flourish/popup 使用 BSD-3-Clause 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。另外不得用原作者名义为衍生产品背书。以上为概括，不构成法律意见，请以许可原文为准。

### @flourish/popup 的下载量有多少？

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

### @flourish/popup 还在维护吗？

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