弹出层

预览

使用方法

<template>
  <div class="popover-wrapper">
    <m-popover position="bottom">
      <template slot="content">
        popover 中的内容
      </template>
      <m-button>下方显示内容</m-button>
    </m-popover>
    <m-popover position="left">
      <template slot="content">
        popover 中的内容
      </template>
      <m-button>左边显示内容</m-button>
    </m-popover>
    <m-popover position="right">
      <template slot="content">
        popover 中的内容
      </template>
      <m-button>右边显示内容</m-button>
    </m-popover>
    <m-popover>
      <template slot="content">
        popover 中的内容
      </template>
      <m-button>点击显示(默认上方)</m-button>
    </m-popover>
    <m-popover trigger="hover">
      <template slot="content">
        popover 中的内容
      </template>
      <m-button>hover 显示内容</m-button>
    </m-popover>
  </div>
</template>

选项

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

1. position

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

2. trigger

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