Popover 气泡卡片

基本用法

支持click与hover模式,支持4种方向

click模式单击显示卡片,再次单击或者单击空白处卡片消失。

hover模式鼠标进入显示卡片,鼠标离开或单击空白处,卡片消失。

示例代码

<template>
    <t-popover position="left">
      <template slot="content">
        文本内容
      </template>
      <t-button>左边弹出</t-button>
    </t-popover>
    <t-popover >
      <template slot="content">
        支持HTML标签
      </template>
      <t-button>上边弹出</t-button>
    </t-popover>
    <t-popover position="bottom">
      <template slot="content">
        再次单击按钮可关闭卡片
      </template>
      <t-button>下边弹出</t-button>
    </t-popover>
    <t-popover position="right" >
      <template slot="content">
        或单击空白处也可关闭卡片
      </template>
      <t-button>右边弹出</t-button>
    </t-popover>
    <br><br>
    <t-popover position="right" trigger="hover">
      <template slot="content">
        鼠标离开按钮后1.5秒内自动关闭
      </template>
      <t-button>hover模式</t-button>
    </t-popover>
</template>

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

Attributes

参数	说明	类型	可选值	默认值
position	卡片弹出位置	String	left,right,top,bottom	top
trigger	设置触发模式	String	click,hover	click