# UPopup 弹出框 - [示例](#示例) - [基本用法](#基本用法) - [自定义](#自定义) - [触发方式](#触发方式) - [弹出方位](#弹出方位) - [右键菜单](#右键菜单) - [禁用状态](#禁用状态) - [API]() - [Props/Attrs](#propsattrs) - [Slots](#slots) - [Events](#events) - [Methods](#methods) **Feedback** 点击/鼠标移入元素，弹出气泡式的卡片浮层。 ## 示例 ### 基本用法 将需要弹出的内容用``包裹起来，并插入到触发事件的元素中。 ``` html 内容 使用 content 属性添加内容 标题 使用 title 属性添加标题 使用 slot 标题 使用 slot 可以添加一些复杂功能 ``` ### 自定义 通过 root 插槽可以自定义整体内容。 ``` html Dropdown 指南 概念 组件 Textarea TreeView ``` ### 触发方式 使用`trigger`属性设置触发方式。 ``` html hover Popup click（默认） Popup right-click Popup double-click Popup ``` #### 手动触发 也可以手动触发弹出框的弹出/关闭： ``` vue ``` ### 弹出方位 使用`placement`属性控制弹出方位。 ``` html 上左 Popup 上边 Popup 上右 Popup 左上 Popup 左边 Popup 左下 Popup 右上 Popup 右边 Popup 右下 Popup 下左 Popup 下边 Popup 下右 Popup ``` #### 跟随鼠标 开启`follow-cursor`属性可以让弹出层跟随鼠标。也可以传一个数字或对象调整位置偏移。 ``` html 上左 Popup 上边 Popup 上右 Popup 左上 Popup 左边 Popup 左下 Popup 右上 Popup 右边 Popup 右下 Popup 下左 Popup 下边 Popup 下右 Popup ``` ### 右键菜单 使用`trigger`和`follow-cursor`两个属性可以很容易的实现右键菜单功能。 ``` html 右键菜单 指南 概念 组件 ``` ### 禁用状态 给弹出框添加`disabled`属性可以禁止弹出效果，但需要手动设置外层元素的状态。 ``` html disabled Popup ``` ## API ### Props/Attrs | Prop/Attr | Type | Options | Default | Description | | --------- | ---- | ------- | ------- | ----------- | | title | string | | `'标题'` | 弹出框标题 | | opened.sync | boolean | | `false` | 弹出框默认弹出 | | trigger | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'click'` | 弹出框触发方式 | | placement | string | `[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]`
`[object Object]` | `'bottom-start'` | 弹出框弹出方向 | | hide-delay | number | | `200` | 提示内容消失延迟时间，单位毫秒（ms） | | offset | string | | `'0'` | 弹出层偏移，如：'10', '10px 10px', '10% 10%', 第一个值表示水平偏移，第二个值表示垂直位移, 默认单位是`px` | | follow-cursor | boolean | | `false` | 弹出框跟随鼠标移动 | | disabled | boolean | | `false` | | | merge-borders | boolean | | `true` | 是否自动合并内外边框 | ### Slots #### (default) 自定义弹出的内容。 #### root 自定义整个弹出层。 #### head 自定义头部。 #### body 自定义中部。 #### foot 自定义尾部。 #### title 自定义标题文本。 ### Events #### @before-open 弹出前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止弹出流程 | | senderVM | UPopup | 发送事件实例 | #### @open 弹出时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 空 | | senderVM | UPopup | 发送事件实例 | #### @before-close 隐藏前触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | object | 自定义事件对象 | | $event.preventDefault | Function | 阻止隐藏流程 | | senderVM | UPopup | 发送事件实例 | #### @close 隐藏时触发。 | Param | Type | Description | | ----- | ---- | ----------- | | $event | | 空 | | senderVM | UPopup | 发送事件实例 | #### @before-toggle @deprecated | Param | Type | Description | | ----- | ---- | ----------- | #### @toggle @deprecated | Param | Type | Description | | ----- | ---- | ----------- | Methods #### open() 弹出实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### close() 关闭实例。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### toggle(opened?) 切换弹出/关闭状态。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | | opened? | boolean | | 可选。弹出/关闭状态 | #### update() 更新 popper 实例。参考 [Popper.update()](https://popper.js.org/popper-documentation.html#Popper.update)。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- | #### scheduleUpdate() 在下次 UI 渲染时一块更新 popper 实例，比`update()`性能要好。参考 [Popper.scheduleUpdate()](https://popper.js.org/popper-documentation.html#Popper.scheduleUpdate)。 | Param | Type | Default | Description | | ----- | ---- | ------- | ----------- |