触发器 Trigger

底层弹出定位组件，Tooltip、Popconfirm、Select 等组件的基础。支持 12 种弹出位置、点击/悬停触发、滚动跟随等能力。

基础用法

通过默认插槽传入触发元素，content 插槽传入弹出内容。默认点击触发，弹出至底部。

vue

<template>
  <bp-space style="width: 100%" justify="space-between">
    <bp-trigger position="top">
      <bp-button>上方弹出</bp-button>
      <template #content>
        <div class="demo">
          <span>上方弹出内容</span>
        </div>
      </template>
    </bp-trigger>

    <bp-trigger position="bottom">
      <bp-button>下方弹出</bp-button>
      <template #content>
        <div class="demo">
          <span>下方弹出内容</span>
        </div>
      </template>
    </bp-trigger>
  </bp-space>
</template>

<style scoped>
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 120px;
  height: 60px;
  padding: 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

弹出位置

支持 12 种弹出位置：top、bottom、left、right 及其对齐变体 top-left、top-right、bottom-left、bottom-right、upper-left、upper-right、low-left、low-right。

vue

<template>
  <div class="position-grid">
    <div class="row">
      <bp-trigger position="top-left">
        <bp-button size="small">Top Left</bp-button>
        <template #content><div class="popup">top-left</div></template>
      </bp-trigger>
      <bp-trigger position="top">
        <bp-button size="small">Top</bp-button>
        <template #content><div class="popup">top</div></template>
      </bp-trigger>
      <bp-trigger position="top-right">
        <bp-button size="small">Top Right</bp-button>
        <template #content><div class="popup">top-right</div></template>
      </bp-trigger>
    </div>
    <div class="row">
      <bp-trigger position="left">
        <bp-button size="small">Left</bp-button>
        <template #content><div class="popup">left</div></template>
      </bp-trigger>
      <bp-trigger position="right">
        <bp-button size="small">Right</bp-button>
        <template #content><div class="popup">right</div></template>
      </bp-trigger>
    </div>
    <div class="row">
      <bp-trigger position="bottom-left">
        <bp-button size="small">Bottom Left</bp-button>
        <template #content><div class="popup">bottom-left</div></template>
      </bp-trigger>
      <bp-trigger position="bottom">
        <bp-button size="small">Bottom</bp-button>
        <template #content><div class="popup">bottom</div></template>
      </bp-trigger>
      <bp-trigger position="bottom-right">
        <bp-button size="small">Bottom Right</bp-button>
        <template #content><div class="popup">bottom-right</div></template>
      </bp-trigger>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.position-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 0;

  .row {
    display: flex;
    gap: 12px;
  }
}

.popup {
  width: 120px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

触发方式

通过 trigger 属性设置触发方式：click（默认）点击触发，hover 悬停触发。

vue

<template>
  <bp-space :size="16">
    <bp-trigger trigger="click">
      <bp-button>Click 触发</bp-button>
      <template #content><div class="popup">点击触发内容</div></template>
    </bp-trigger>
    <bp-trigger trigger="hover">
      <bp-button>Hover 触发</bp-button>
      <template #content><div class="popup">悬停触发内容</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 140px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

延迟触发

通过 open-delay 和 close-delay 属性设置悬停触发的延迟时间（毫秒），避免误触。

vue

<template>
  <bp-space :size="16">
    <bp-trigger trigger="hover" :open-delay="300">
      <bp-button>延迟 300ms 打开</bp-button>
      <template #content><div class="popup">延迟打开</div></template>
    </bp-trigger>
    <bp-trigger trigger="hover" :close-delay="500">
      <bp-button>延迟 500ms 关闭</bp-button>
      <template #content><div class="popup">延迟关闭</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 150px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

箭头

设置 show-arrow 属性在弹出层显示指向触发元素的箭头。

vue

<template>
  <bp-space :size="16">
    <bp-trigger show-arrow>
      <bp-button>带箭头</bp-button>
      <template #content><div class="popup">显示箭头指向触发元素</div></template>
    </bp-trigger>
    <bp-trigger>
      <bp-button>无箭头</bp-button>
      <template #content><div class="popup">默认无箭头</div></template>
    </bp-trigger>
  </bp-space>
</template>

<style lang="scss" scoped>
.popup {
  width: 180px;
  padding: 8px 12px;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

滚动跟随

设置 update-at-scroll 属性使弹出层在滚动时跟随更新位置，适用于在可滚动容器中使用。

vue

<template>
  <div :style="{ width: '100%', height: '140px', overflowY: 'scroll' }">
    <div :style="{ height: '300px', background: '#fafafa' }">
      <bp-trigger update-at-scroll>
        <bp-button type="plain">滚动容器内弹出</bp-button>
        <template #content>
          <div class="demo">
            <span>滚动时跟随更新位置</span>
          </div>
        </template>
      </bp-trigger>
    </div>
  </div>
</template>

<style scoped>
.demo {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 180px;
  height: 100px;
  padding: 10px;
  font-size: 13px;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
</style>

Trigger 属性

v-model	控制弹出层是否可见	Boolean	-	-
trigger	触发方式	TriggerType	click	-
position	弹出位置，支持 12 种方向	TriggerPosition	bottom	-
popup-offset	弹出层与触发元素的偏移距离	Number	-	-
popup-translate	弹出层平移量 [x, y]	Array	[0, 0]	-
auto-fit-width	弹出层是否自适应触发元素宽度	Boolean	-	-
transition	弹出层过渡动画名称	String	fade	-
click-outside	点击弹出层外部是否关闭	Boolean	true	-
disabled	是否禁用触发	Boolean	-	-
hide-trigger	是否隐藏触发元素	Boolean	-	-
update-at-scroll	滚动时是否更新弹出层位置	Boolean	-	-
scroll-to-close	滚动时是否关闭弹出层	Boolean	-	-
auto-fix-position	是否自动修正弹出位置以适配窗口	Boolean	true	-
scroll-to-close-time	滚动关闭的延迟时间（毫秒）	Number	400	-
throttle-time	resize/scroll 事件节流时间（毫秒）	Number	20	-
open-delay	悬停触发的延迟打开时间（毫秒）	Number	-	-
close-delay	悬停触发的延迟关闭时间（毫秒）	Number	100	-
boundary-padding	弹出层与窗口边界的最小留白	Number	8	-
show-arrow	是否显示指向触发元素的箭头	Boolean	-	-
get-popup-container	自定义弹出层挂载容器	Function	-	-

Trigger 事件

update:modelValue	弹出层可见状态变化时触发	visible: boolean	-
popupVisible	弹出层显示/隐藏时触发	visible: boolean	-
positionChange	弹出层位置变化时触发	{ position, top, left, width }	-

Trigger 插槽

default	触发弹出层的元素	-	-
content	弹出层内容	-	-

触发器 Trigger ​

基础用法 ​

弹出位置 ​

触发方式 ​

延迟触发 ​

箭头 ​

滚动跟随 ​

Trigger 属性 ​

Trigger 事件 ​

Trigger 插槽 ​