<script>
export default {
  components: {},
  data() {
    return{
        status: {},
        popoverChange: function(status) {
            this.status = status;
            console.log('当前状态：', status.show ? '打开' : '关闭')
        },
        cancel: function(){
            this.status.show = false;
        }
    }
  }
}
</script>
# Popover 弹出框

## 基础用法
Popover 的属性与 Tooltip 很类似，它们都是基于Vue-popper开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。

:::demo 使用`f-icon`嵌入图标
````html
<div class="box">
    <efly-popover top="32px" @change="popoverChange($event)">
        <div class="pad-default" style="width: 400px">
            <p>标题</p>
            <p>这是一段内容,这是一段内容,这是一段内容,这是一段内容。</p>
        </div>
        <efly-button slot="reference">hover触发</efly-button>
    </efly-popover>
    <efly-popover trigger="click" top="32px" @change="popoverChange($event)">
        <div class="pad-default" style="width: 400px">
            <p>标题 <span style="margin-left: 50px;" @click="cancel()">关闭</span></p>
            <p>这是一段内容,这是一段内容,这是一段内容,这是一段内容。</p>
        </div>
        <efly-button slot="reference">click触发</efly-button>
    </efly-popover>
</div>
<script>
export default {
  components: {},
  data() {
    return{
        status: {},
        popoverChange: function(status) {
            this.status = status;
            console.log('当前状态：', status.show ? '打开' : '关闭')
        },
        test: function(){
            this.status.show = false;
        }
    }
  }
}
</script>
````
:::

## 参数说明
|   参数     |   说明    | 类型      | 可选值       | 默认值   |
|---------  |-------- |---------- |-------------  |-------- |
|trigger    |触发方式   | String  |  hover / click  |    hover     |
|left       |左定位     | String  |  —  |    0     |
|top        |上定位     | String  |  —  |    0     |

## 事件
| 事件名称      | 说明    | 回调参数   
|---------- |-------- |---------- |
| change     | 选项改变事件   | 弹出框状态  |
