Popover 气泡卡片

点击/鼠标移入元素，弹出气泡式的卡片浮层。

何时使用

当目标元素有进一步的描述和相关操作时，可以收纳到卡片中，根据用户的操作行为进行展现。

和 Tooltip 的区别是，用户可以对浮层上的元素进行操作，因此它可以承载更复杂的内容，比如链接或按钮等。

代码演示

基本用法
基本用法。

<template>
  <div class="fs-popover-docx-box">
    <f-popover title="标题信息" trigger="hover" :overlayStyle="{ width: '264px' }">
      <template #content>
        点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
      </template>
      <f-button>Hover</f-button>
    </f-popover>
    <f-popover title="标题信息" trigger="focus" :overlayStyle="{ width: '264px' }">
      <template #content>
        点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
      </template>
      <f-button>Focus</f-button>
    </f-popover>
    <f-popover title="标题信息" trigger="click" :overlayStyle="{ width: '264px' }">
      <template #content>
        点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
      </template>
      <f-button>Click</f-button>
    </f-popover>

    <f-popover trigger="hover" :overlayStyle="{ width: '264px' }">
      <template #content>
        点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
      </template>
      <f-button>无标题</f-button>
    </f-popover>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {},
})
</script>
<style scoped>
.fs-popover-docx-box > * {
  margin-right: 20px;
}
</style>

位置
位置有十二个方向。

<template>
  <div id="components-popover-demo-placement">
    <div :style="{ marginLeft: `${buttonWidth}px`, whiteSpace: 'nowrap' }">
      <f-popover placement="topLeft" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>TL</f-button>
      </f-popover>
      <f-popover placement="top" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>Top</f-button>
      </f-popover>
      <f-popover placement="topRight" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>TR</f-button>
      </f-popover>
    </div>
    <div :style="{ width: `${buttonWidth}px`, float: 'left' }">
      <f-popover placement="leftTop" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>LT</f-button>
      </f-popover>
      <f-popover placement="left" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>Left</f-button>
      </f-popover>
      <f-popover placement="leftBottom" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>LB</f-button>
      </f-popover>
    </div>
    <div :style="{ width: `${buttonWidth}px`, marginLeft: `${buttonWidth * 4 + 24}px` }">
      <f-popover placement="rightTop" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>RT</f-button>
      </f-popover>
      <f-popover placement="right" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>Right</f-button>
      </f-popover>
      <f-popover placement="rightBottom" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>RB</f-button>
      </f-popover>
    </div>
    <div :style="{ marginLeft: `${buttonWidth}px`, clear: 'both', whiteSpace: 'nowrap' }">
      <f-popover placement="bottomLeft" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>BL</f-button>
      </f-popover>
      <f-popover placement="bottom" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>Bottom</f-button>
      </f-popover>
      <f-popover placement="bottomRight" :overlayStyle="{ width: '264px' }">
        <template #content>
          点击/鼠标移入元素，弹出气泡式的卡片浮层。以卡片的形式承载了更多的内容，比如链接、表格、按钮等。
        </template>
        <template #title>
          <span>标题</span>
        </template>
        <f-button>BR</f-button>
      </f-popover>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    return {
      buttonWidth: ref<number>(70),
    }
  },
})
</script>
<style>
#components-popover-demo-placement .fs-btn {
  width: 70px;
  text-align: center;
  padding: 0;
  margin-right: 8px;
  margin-bottom: 8px;
}
</style>

API

参数	说明	类型	默认值	版本
content	卡片内容	string|slot|VNode	-
title	卡片标题	string|slot|VNode	-
align	该值将合并到 placement 的配置中，设置参考 dom-align	Object	无
arrowPointAtCenter	箭头是否指向目标元素中心	boolean	false
autoAdjustOverflow	气泡被遮挡时自动调整位置	boolean	true
color	背景颜色	string	无
defaultVisible	默认是否显隐	boolean	false
destroyTooltipOnHide	隐藏后是否销毁 tooltip	boolean	false
getPopupContainer	浮层渲染父节点，默认渲染到 body 上	Function(triggerNode)	() => document.body
mouseEnterDelay	鼠标移入后延时多少才显示 Tooltip，单位：秒	number	0.1
mouseLeaveDelay	鼠标移出后延时多少才隐藏 Tooltip，单位：秒	number	0.1
overlayClassName	卡片类名	string	无
overlayStyle	卡片样式	object	无
placement	气泡框位置，可选 top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom	string	top
trigger	触发行为，可选 hover/focus/click/contextmenu	string	hover
visible(v-model)	用于手动控制浮层显隐	boolean	false

注意

请确保 Popover 的子元素能接受 mouseenter、mouseleave、focus、click 事件。