触发器 Trigger

基础用法

<template>
  <bp-space style="width: 100%;" justify="space-between">
    <bp-trigger position="top">
      <bp-button>Click me</bp-button>
      <template #content>
        <div class="demo">
          <span v-text="'No content.'"></span>
        </div>
      </template>
    </bp-trigger>

    <bp-trigger position="bottom">
      <bp-button>Click me</bp-button>
      <template #content>
        <div class="demo">
          <span v-text="'No content.'"></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: 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>

<template>
  <div :style="{ width: '100%', height: '140px', overflowY: 'scroll' }">
    <div :style="{ height: '300px', background: '#fafafa' }">
      <bp-trigger update-at-scroll>
        <bp-button type="plain">Click me</bp-button>
        <template #content>
          <div class="demo">
            <span v-text="'No content.'"></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	弹出位置	TriggerPosition	bottom	-
popup-offset	弹出偏移	Number	-	-
popup-translate	弹出平移	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	节流时间	Number	20	-
open-delay	延迟打开(ms)	Number	-	-
close-delay	延迟关闭(ms)	Number	100	-
boundary-padding	边界留白	Number	8	-
show-arrow	是否显示箭头	Boolean	-	-
show-shadow	是否显示阴影	Boolean	true	-
get-popup-container	自定义挂载容器	Function	-	-

Trigger 事件

update:modelValue	显示状态变化	visible: boolean	-
popupVisible	弹出层显示变化	visible: boolean	-
positionChange	位置变化	{ position, top, left, width }	-

Trigger 插槽

default	触发内容	-	-
content	弹出内容	-	-