# Popover 弹出框

## 何时使用

在空间有限的情况下，利用弹出框在页面上层展示更多内容。

### 基本使用

基本使用。

@[demo](./demo/basic.vue)


### 定位的情况

本例演示了在定位容器下的显示情况。

@[demo](./demo/position.vue)


### 嵌套内容

可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。

@[demo](./demo/more-content.vue)


### 异步内容


@[demo](./demo/loading.vue)



### Popover props

| 参数 | 说明 | 类型 | 默认值 | 可选值 |
| --- | --- | --- | --- | --- |
| title | 标题 | String | "" | - |
| content | 内容 | String | "" | - |
| disabled | 是否禁用 | Boolean | false | - |
| trigger | 触发方式	 | String | click | click/focus/hover/contentmenu |
| transition | 定义渐变动画 | String | - | fade-in-linear |
| placement | 出现位置 | String | top | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end |
| visible(v-model) | 状态是否可见 | Boolean | false | - |
| offset | 出现位置的偏移量	 | Number/String | 0 | - |
| visible-arrow | 是否显示箭头 | Boolean | true | false |
| popper-width | 指定popper的宽度 | String | - | - |
| popper-class | 指定popper的class | - | - | - |
| popper-options | popper.js 的参数 | Object | 参考 popper.js 文档 | - |


### Popover slots
| 插槽名 | 说明 |
| --- | --- |
| title | 自定义标题 |
| content | 自定义内容 |


### Popover events
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| after-enter | 显示动画播放完毕后触发	 | - |
| after-leave | 隐藏动画播放完毕后触发	 | - |