弹出层

预览

使用方法

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

<script>
import Popover from "../../../src/Popover";
import Button from "../../../src/Button";
export default {
  components: {
    "zh-popover": Popover,
    "zh-button": Button,
  },
};
</script>

选项

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

1. position

position 的可选参数为 left / top / bottom / right ，默认值为 top 。

2. trigger

trigger 的可选参数为 click 和 hover ，默认值为 click 。