Popover 弹出框 v1.1.0

展示位置

Popover 弹出框提供 9 种展示位置。

使用 content 属性来设置悬停时显示的信息。 由 placement 属性决定 Popover 弹出框的位置。该属性值格式为：[方向]-[对齐位置]，可供选择的四个方向分别是 top、left、right、bottom，可供选择的三种对齐方式分别是 start、end、null，默认的对齐方式为 null。 以 placement="left-end" 为例，Popover 弹出框会显示在悬停元素的左侧，且提示信息的底部与悬停元素的底部对齐。

<script lang="ts" setup>
import { TkPopover } from "vitepress-theme-teek";
</script>

<template>
  <div class="popover-base-box">
    <div class="row center">
      <TkPopover title="Title" content="Top Left prompts info" placement="top-start">
        <template #reference>
          <button>top-start</button>
        </template>
      </TkPopover>
      <TkPopover title="Title" content="Top Center prompts info" placement="top">
        <template #reference>
          <button>top</button>
        </template>
      </TkPopover>
      <TkPopover title="Title" content="Top Right prompts info" placement="top-end">
        <template #reference>
          <button>top-end</button>
        </template>
      </TkPopover>
    </div>
    <div class="row">
      <TkPopover title="Title" content="Left Top prompts info" placement="left-start">
        <template #reference>
          <button>left-start</button>
        </template>
      </TkPopover>
      <TkPopover title="Title" content="Right Top prompts info" placement="right-start">
        <template #reference>
          <button>right-start</button>
        </template>
      </TkPopover>
    </div>
    <div class="row">
      <TkPopover title="Title" content="Left Center prompts info" placement="left">
        <template #reference>
          <button class="mt-3 mb-3">left</button>
        </template>
      </TkPopover>
      <TkPopover title="Title" content="Right Center prompts info" placement="right">
        <template #reference>
          <button>right</button>
        </template>
      </TkPopover>
    </div>
    <div class="row">
      <TkPopover title="Title" content="Left Bottom prompts info" placement="left-end">
        <template #reference>
          <button>left-end</button>
        </template>
      </TkPopover>
      <TkPopover title="Title" content="Right Bottom prompts info" placement="right-end">
        <template #reference>
          <button>right-end</button>
        </template>
      </TkPopover>
    </div>
    <div class="row center">
      <TkPopover title="Title" content="Bottom Left prompts info" placement="bottom-start">
        <template #reference><button>bottom-start</button></template>
      </TkPopover>
      <TkPopover title="Title" content="Bottom Center prompts info" placement="bottom">
        <template #reference><button>bottom</button></template>
      </TkPopover>
      <TkPopover title="Title" content="Bottom Right prompts info" placement="bottom-end">
        <template #reference>
          <button>bottom-end</button>
        </template>
      </TkPopover>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popover-base-box {
  width: 600px;
}

.popover-base-box .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.popover-base-box .center {
  justify-content: center;
  gap: 10px;
}

button {
  padding: 8px 15px;
  font-size: 14px;
  border-radius: 4px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  transition: 0.1s;
  font-weight: 500;
  user-select: none;
  border: 1px solid #dcdfe6;

  &:hover {
    background-color: var(--tk-fill-color-dark);
  }
}
</style>

隐藏源代码

API

属性

属性名	说明	类型	默认值
placement	出现位置	click / focus / hover / contextmenu	bottom
trigger	触发方式	click / focus / hover / contextmenu	hover
content	显示的内容，也可以通过写入默认 slot 修改显示内容	string	''
width	宽度，如果不指定，则会根据内容自动计算	string / number	—
height	高度，如果不指定，则会根据内容自动计算	string / number	—
disabled	Popover 是否可用	boolean	false
v-model	Popover 是否显示	boolean	false
offset	浮层偏移量，等于 x-offset 和 y-offset	number	0
x-offset	水平方向浮层偏移量	number	0
y-offset	垂直方向浮层偏移量	number	0
transition	定义渐变动画，默认是 el-fade-in-linear	string	—
show-arrow	是否显示 Tooltip 箭头， 欲了解更多信息，请参考 ElPopper	boolean	true
popper-class	为 popper 添加类名	string	—
popper-style	为 popper 自定义样式	string / object	—
trigger-el	代表 reference 插槽的参照元素	HTMLElement	—
beforePopup	弹框弹出前的回调，支持返回新的 top、right、bottom、left	PopoverTransformOptions	—

interface PopoverTransformOptions {
  /**
   * 弹框的 top 位置
   */
  top: NumStr;
  /**
   * 弹框的 right 位置
   */
  right: NumStr;
  /**
   * 弹框的 bottom 位置
   */
  bottom: NumStr;
  /**
   * 弹框的 left 位置
   */
  left: NumStr;
  /**
   * 触发弹框的 DOM 元素，如果传入 virtualEl 则是 virtualEl 元素
   */
  triggerElement: HTMLDivElement;
  /**
   * 弹框的 DOM 元素
   */
  popoverElement: HTMLDivElement;
}

插槽

插槽名	说明
default	Popover 内嵌 HTML 文本
reference	触发 Popover 显示的 HTML 元素

事件

事件	说明
focus	显示时触发
blur	隐藏时触发
close	Escape 按键触发时触发