---
title: Popup 弹出层
description: 弹出层组件是其他弹窗类组件如气泡确认框实现的基础，当这些组件提供的能力不能满足定制需求时，可以在弹出层组件基础上封装。
isComponent: true
usage: { title: "", description: "" }
spline: message
author: swimly
---

## 基本用法

通过 `content` 可自定义浮层弹出的内容，值为`LNode`类型。

> 注意：当使用`函数属性`来返回浮层内容时，一定要给`script`标签设置`lang="jsx"`，否则会报错！

{{ base }}

## 自定义触发元素

默认情况下，浮层的触发元素都是直接包裹在`l-popup`内部，并且可通过`default`和`triggerElement`来定义触发元素的内容。

> 注意：当使用`函数属性`来定义触发元素时，一定要给`script`标签设置`lang="jsx"`，否则会报错！

{{ triggerElement }}

## 触发浮层出现的方式

最简单的方式便是通过`trigger`来快速设置触发浮层出现的方式，可选：`hover` `click` `focus` `context-menu`，还可以通过`visible`属性来自由控制浮层的显示和隐藏。

> 注意：当设置了`visible`属性后，`trigger`属性将失效。

{{ trigger }}

## 延时显示或隐藏覆层

通过`delay`属性可设置浮层显示和隐藏的延迟时间，类型为：`number`或者`Array<number>`，当为数值类型值表示显示和隐藏的时间一致，当为数组类型时其格式为：[`延迟显示的时间`，`延迟隐藏的时间`]，如无特殊情况，无需单独设置该属性。

{{ delay }}

## 浮层出现位置

通过`placement`属性可定义浮层相对于触发元素的位置，一共`12`个不同的方位，详细信息请参考下面的例子。

> 提示：当当前位置不足以容纳浮层的内容时会自动调整其位置。

{{ placement }}

## 定义浮层的样式

如有特殊情况需要自定义浮层的样式，可通过如下`3`个属性来设置，请按照具体情况选用对应的属性。

`overlayClassName`: 用于定义浮层的类名，作用于`l-popup`上

`overlayStyle`: 用于定义浮层样式，比如浮层宽度。作用于`l-popup`上

`overlayInnerStyle`: 用于定义浮层内容部分样式，比如当超过最大高度出现滚动条。作用于：`l-popup__content`上。

{{ style }}

## 挂载节点

通过`attach`制定挂载节点。数据类型为 `String` 时，会被当作选择器处理，进行节点查询。示例：`body` 或
`() => document.body`

{{ parent }}

## 自动销毁

默认情况下，弹出层隐藏的时候仅仅是设置为不可见，而实际的 dom 元素依然存在，可通过`destroyOnClose`设置浮层隐藏的时候会自
动销毁节点。

{{ destory }}

## 透传 Popper 属性

通过`popperProps`属性可以定义更多的样式，具体请参考：[https://popper.js.org/](https://popper.js.org/)

{{ popper }}

## 禁用状态

可通过给`l-popup`设置`disabled`来禁用当前弹出层，也可通过给触发元素设置`disabled`属性来禁用。

{{ disabled }}
