Teal TealUI

弹层效果web/popup

通过用户操作显示弹层的交互效果。

基本用法
弹层事件
点击相关事件
移动相关事件
焦点相关事件
自定义事件
弹层动画
API
全局
Popup 类

基本用法

设置元素 elem 在用户点击 target 后自动弹出：

<button id="target">按钮</button>
<div id="elem" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

   a = popup(elem, {
        target: target
    });
</script>

弹层事件

使用 event 字段指定触发弹层显示的事件。

点击相关事件

<button id="target_click">按钮</button>
<div id="elem_click" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_click, {
        target: target_click,
        event: "click"
    });
</script>
<button id="target_dblclick">按钮</button>
<div id="elem_dblclick" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_dblclick, {
        target: target_dblclick,
        event: "dblclick"
    });
</script>
<button id="target_auxclick">按钮</button>
<div id="elem_auxclick" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_auxclick, {
        target: target_auxclick,
        event: "auxclick"
    });
</script>
<button id="target_contextmenu">按钮</button>
<div id="elem_contextmenu" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_contextmenu, {
        target: target_contextmenu,
        event: "contextmenu"
    });
</script>
<button id="target_pointerdown">按钮</button>
<div id="elem_pointerdown" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_pointerdown, {
        target: target_pointerdown,
        event: "pointerdown"
    });
</script>
<button id="target_pointerup">按钮</button>
<div id="elem_pointerup" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_pointerup, {
        target: target_pointerup,
        event: "pointerup"
    });
</script>

移动相关事件

<button id="target_pointerenter">按钮</button>
<div id="elem_pointerenter" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_pointerenter, {
        target: target_pointerenter,
        event: "pointerenter"
    });
</script>
<button id="target_hover">按钮</button>
<div id="elem_hover" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_hover, {
        target: target_hover,
        event: "hover"
    });
</script>
<button id="target_pointermove">按钮</button>
<div id="elem_pointermove" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_pointermove, {
        target: target_pointermove,
        event: "pointermove"
    });
</script>

焦点相关事件

<button id="target_active">按钮</button>
<div id="elem_active" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_active, {
        target: target_active,
        event: "active"
    });
</script>
<button id="target_focus">按钮</button>
<div id="elem_focus" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_focus, {
        target: target_focus,
        event: "focus"
    });
</script>
<button id="target_focusin">按钮</button>
<div id="elem_focusin" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_focusin, {
        target: target_focusin,
        event: "focusin"
    });
</script>

自定义事件

手动调用 popup.show() 和 popup.hide() 显示和隐藏弹层。

<button id="target_custom">按钮</button>
<div id="elem_custom" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    const pop = popup(elem_custom, {
        target: target_custom,
        event: null
    });

    // 自定义绑定双击事件。
    target_custom.ondblclick = () => {
        pop.show();
    };
</script>

弹层动画

通过 animation 设置弹层的动画。可用的内置动画见DOM 处理。

<button id="target_animation">按钮</button>
<div id="elem_animation" class="doc-box" style="position: fixed; display: none;"></div>
<script>
    import popup from "web/popup";

    popup(elem_animation, {
        target: target_animation,
        animation: "scaleY"
    });
</script>

API

全局

函数 描述
⮞ popup(elem, ...)(elem:HTMLElement, options?:Partial<Popup>):Popup

创建一个弹层。

参数 类型 描述 默认值
elem* HTMLElement —
options Partial<Popup> —

返回值

类型：Popup

返回一个弹层对象。

创建一个弹层。

Popup 类

表示一个弹层对象。

字段 类型 描述
⮞ elem : HTMLElement

弹层元素。

 HTMLElement

弹层元素。
⮞ target : HTMLElement

触发弹层显示的元素。

 HTMLElement

触发弹层显示的元素。
⮞ event : "click" | "dblclick" | "auxclick" | "contextmenu" | "pointerdown" | "pointerup" | "pointerenter" | "pointermove" | "hover" | "active" | "focus" | "focusin" = "click"

触发弹层显示的事件。

说明

  • click(默认): 点击 target 后弹出，点击屏幕空白处消失。
  • dblclick: 双击 target 后弹出，点击屏幕空白处消失。
  • auxclick: 右击 target 后弹出，点击屏幕空白处消失。
  • pointerdown: 指针在 target 按下后弹出，点击屏幕空白处消失。
  • pointerup: 指针在 target 按出后弹出，点击屏幕空白处消失。
  • contextmenu：作为 target 右键菜单后弹出，点击屏幕空白处消失。
  • pointerenter: 指针移入 target 后自动弹出，移到屏幕空白处消失。
  • hover: 指针移入 target 后自动弹出，移出 target 后消失。
  • pointermove: 指针移入 target 后自动弹出，并跟随鼠标移动。
  • active：指针在 target 按下时显示，松开后消失。
  • focus： target 获取焦点后显示，失去焦点后后消失。
  • focusin：target 获取焦点后显示，点击屏幕空白处消失。
  • 其它：不绑定事件。
 string

触发弹层显示的事件。
⮞ delay : number = 100

显示弹层的延时毫秒数。仅对指针移动事件有效。

 number

显示弹层的延时毫秒数。仅对指针移动事件有效。
⮞ pinTarget : HTMLElement | Document | Rect = target

弹层对齐的目标节点或区域。

 HTMLElement | Document | Rect

弹层对齐的目标节点或区域。
⮞ align : PinAlign = "bottomLeft"

弹层对齐的位置。如果为 null 则不自动对齐。

 PinAlign

弹层对齐的位置。如果为 null 则不自动对齐。
⮞ margin : number = 0

元素的外边距，即对齐时元素和 pinTarget 的距离。

 number

元素的外边距，即对齐时元素和 pinTarget 的距离。
⮞ container : HTMLElement | Document = document

容器节点或区域，定位超出容器后会自动调整。

 HTMLElement | Document

容器节点或区域，定位超出容器后会自动调整。
⮞ containerPadding : number = 0

容器的内边距。

 number

容器的内边距。
⮞ offset : number = 0

定位后的额外偏移距离。如果小于 1，则表示相对元素大小的百分比。

 number

定位后的额外偏移距离。如果小于 1，则表示相对元素大小的百分比。
⮞ resize : boolean = false

如果容器比元素小，是否允许更改元素大小。

 boolean

如果容器比元素小，是否允许更改元素大小。
⮞ animation : ToggleAnimation = "opacity"

显示弹层时使用的动画。

 ToggleAnimation

显示弹层时使用的动画。
⮞ hideAnimation : ToggleAnimation = animation

隐藏弹层时使用的动画。

 ToggleAnimation

隐藏弹层时使用的动画。
⮞ duration : number = 200

显示动画的持续毫秒数。

 number

显示动画的持续毫秒数。
⮞ hideDuration : number = duration

隐藏动画的持续毫秒数。

 number

隐藏动画的持续毫秒数。
⮞ timingFunction : string = "ease-in"

显示弹层时使用的动画渐变函数。

 string

显示弹层时使用的动画渐变函数。
⮞ hideTimingFunction : string = timingFunction

隐藏弹层时使用的动画渐变函数。

 string

隐藏弹层时使用的动画渐变函数。
⮞ autoHide : boolean = true

是否在点击屏幕空白处后消失。

 boolean

是否在点击屏幕空白处后消失。
⮞ autoScroll : boolean = true

是否在滚动后自动重定位。

 boolean

是否在滚动后自动重定位。
⮞ onShow : (sender: Popup) => void

弹层显示事件。

 function

弹层显示事件。
⮞ onHide : (sender: Popup) => void

弹层隐藏事件。

 function

弹层隐藏事件。
⮞ onAlign : (r: PinResult, sender: Popup) => void

弹层对齐事件。

 function

弹层对齐事件。
⮞ hidden : boolean

(只读)判断当前元素是否已隐藏。

 boolean

(只读)判断当前元素是否已隐藏。
方法 描述
⮞ enable()():void

启用弹层。

返回值

类型：void

启用弹层。
⮞ disable()():void

禁用弹层。

返回值

类型：void

禁用弹层。
⮞ show()():void

显示当前浮层。

返回值

类型：void

显示当前浮层。
⮞ hide()():void

隐藏当前浮层。

返回值

类型：void

隐藏当前浮层。
⮞ toggle(...)(value?:boolean):void

切换显示或隐藏当前浮层。

参数 类型 描述 默认值
value boolean this.hidden

返回值

类型：void

切换显示或隐藏当前浮层。
⮞ handleDocumentPointerDown(e)(e:MouseEvent):void

(保护的)处理文档指针按下事件。

参数 类型 描述 默认值
e* MouseEvent —

返回值

类型：void

(保护的)处理文档指针按下事件。
⮞ handleDocumentScroll(e)(e:MouseEvent):void

(保护的)处理文档滚动事件。

参数 类型 描述 默认值
e* MouseEvent —

返回值

类型：void

(保护的)处理文档滚动事件。
⮞ realign()():PinResult

重新对齐浮层的位置。

返回值

类型：PinResult

如果已重新定位则返回定位的结果。

重新对齐浮层的位置。