气泡卡片 Popover

鼠标悬停、聚焦或点击在某个组件时，弹出的气泡式的卡片浮层。可以对卡片上的元素进行操作。

基本用法

鼠标移入或点击，弹出气泡，可对浮层上元素进行操作，承载复杂内容和操作。

---

代码事例

<template>
  <fk-space>
    <fk-popover title="Title">
      <fk-button>Hover</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover :show-arrow="false" title="Title">
      <fk-button>无箭头</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    </fk-space>
</template>

触发方式

通过设置 trigger，可以指定不同的触发方式。

---

代码事例

<template>
  <fk-space>
    <fk-popover title="Title">
      <fk-button>Hover Me</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover title="Title" trigger="click">
      <fk-button>Click Me</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
  </fk-space>
</template>

弹出位置

Popover支持 12 个不同的方位。分别为：上左 上 上右 下左 下 下右 左上 左 左下 右上 右 右下。

---

代码事例

<template>
  <div :style="{position: 'relative', width: '440px', height: '280px'}">
    <fk-popover position="tl">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'70px'}">TL</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="top">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'180px'}">TOP</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="tr">
      <fk-button class="button" :style="{position: 'absolute',top:'0',left:'290px'}">TR</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="bl">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'70px'}">BL</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="bottom">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'180px'}">BOTTOM</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="br">
      <fk-button class="button" :style="{position: 'absolute',top:'240px',left:'290px'}">BR</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="lt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'10px'}">LT</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="left">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'10px'}">LEFT</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="lb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'10px'}">LB</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="rt">
      <fk-button class="button" :style="{position: 'absolute',top:'60px',left:'350px'}">RT</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="right">
      <fk-button class="button" :style="{position: 'absolute',top:'120px',left:'350px'}">RIGHT</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
    <fk-popover position="rb">
      <fk-button class="button" :style="{position: 'absolute',top:'180px',left:'350px'}">RB</fk-button>
      <template #content>
        <p>Here is the text content</p>
        <p>Here is the text content</p>
      </template>
    </fk-popover>
  </div>
</template>

<style scoped lang="less">
.button{
  width: 100px;
}
</style>

<popover> 组件继承 <trigger> 组件的全部属性

API

<popover> Props

参数名	描述	类型	默认值
popup-visible (v-model)	文字气泡是否可见	boolean	-
default-popup-visible	文字气泡默认是否可见（非受控模式）	boolean	false
title	标题	string	-
content	内容	string	-
trigger	触发方式	'hover' | 'click' | 'focus' | 'contextMenu'	'hover'
position	弹出位置	'top' | 'tl' | 'tr' | 'bottom' | 'bl' | 'br' | 'left' | 'lt' | 'lb' | 'right' | 'rt' | 'rb'	'top'
content-class	弹出框内容的类名	ClassName	-
content-style	弹出框内容的样式	CSSProperties	-
arrow-class	弹出框箭头的类名	ClassName	-
arrow-style	弹出框箭头的样式	CSSProperties	-
popup-container	弹出框的挂载容器	string | HTMLElement	-

<popover> Events

事件名	描述	参数
popup-visible-change	文字气泡显示状态改变时触发	visible: boolean

<popover> Slots

插槽名	描述	参数
title	标题	-
content	内容	-