Popover 弹出框

基本用法

默认显示在正中间，并且以 click 方式激活，使用方法跟 Tooltip 基本一样

<at-popover placement="top" title="Title" content="Top Placement">
  <at-button size="small">点击</at-button>
</at-popover>
<at-popover content="Top Placement" title="Title">
  一段文字
</at-popover>

更改激活的方式

默认使用 click 方式激活，可设置 trigger 更换激活方式

<at-popover trigger="click" content="Top Placement">
  <at-button size="small">Click</at-button>
</at-popover>
<at-popover trigger="hover" title="Title" content="Top Placement">
  <at-button size="small">Hover</at-button>
</at-popover>

弹出框的位置

设置属性 placement 可更改弹出框的位置，默认显示在顶部 top

<at-popover trigger="hover" content="Top Placement">
  <at-button size="small">Top</at-button>
</at-popover>
<at-popover trigger="hover" content="Top Placement" placement="bottom">
  <at-button size="small">Bottom</at-button>
</at-popover>
<at-popover trigger="hover" content="Top Placement" placement="left">
  <at-button size="small">Left</at-button>
</at-popover>
<at-popover trigger="hover" content="Top Placement" placement="right">
  <at-button size="small">Right</at-button>
</at-popover>

嵌套内容

除了可以使用属性 title 和 content 设置弹出框的内容，还可以使用 slot="title" 和 slot="content" 的方式设置弹出框的嵌套内容

<at-popover placement="top" v-model="show" @toggle="toggleShow">
  <at-button size="small">删除</at-button>
  <template slot="content">
    <p>这是一段内容，确定删除吗？</p>
    <div style="text-align: right; margin-top: 8px;">
      <at-button size="smaller" @click="show = false">取消</at-button>
      <at-button type="primary" size="smaller" @click="show = false">确定</at-button>
    </div>
  </template>
</at-popover>

Popover 参数