气泡卡片

预览

使用方法

<template>
  <div class="popover-wrapper">
    <i-popover position="top">
      <template slot="content">
        在 button 上方显示内容
      </template>
      <i-button>上方显示内容</i-button>
    </i-popover>
    <i-popover position="bottom">
      <template slot="content">
        在 button 下方显示内容
      </template>
      <i-button>下方显示内容</i-button>
    </i-popover>
     <i-popover position="left">
      <template slot="content">
        在 button 左方显示内容
      </template>
      <i-button>左方显示内容</i-button>
    </i-popover>
     <i-popover position="right">
      <template slot="content">
        在 button 右方显示内容
      </template>
      <i-button>右方显示内容</i-button>
    </i-popover>
    <i-popover trigger="hover">
      <template slot="content">
        popover 中的内容
      </template>
      <i-button>hover 显示内容</i-button>
    </i-popover>
  </div>
</template>

选项

Popover 组件支两个选项： position 用于设置显示位置； trigger 用于设置出发事件

1. position

position 默认为 top ，可选择的参数为 top , left , right , bottom ,分别设置 popover 显示的方位。

2. trigger

trigger 默认为 click ,,用于设置触发 popover 显示的事件。 除此之外还支持 hover