触发器 Trigger

基础用法

通过 trigger 属性控制触发形式

<template>
  <bp-space align="center">
    <bp-trigger>
      <bp-button>Click me</bp-button>
      <template #content>
        <div class="demo">
          <bp-empty description="No content."></bp-empty>
        </div>
      </template>
    </bp-trigger>

    <bp-trigger trigger="hover">
      <bp-link>Hover me</bp-link>
      <template #content>
        <div class="demo">
          <bp-empty description="No content."></bp-empty>
        </div>
      </template>
    </bp-trigger>
  </bp-space>
</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>

位置

通过 position 属性控制浮层弹出位置

<template>
  <bp-space type="vertical">
    <bp-radio-group v-model="val" type="button">
      <template v-for="v in optionList">
        <bp-radio :value="v.value">{{ v.label }}</bp-radio>
      </template>
    </bp-radio-group>
    <bp-radio-group v-model="val" type="button">
      <template v-for="v in optionList2">
        <bp-radio :value="v.value">{{ v.label }}</bp-radio>
      </template>
    </bp-radio-group>

    <bp-trigger :position="val" trigger="hover">
      <bp-button>Hover me</bp-button>
      <template #content>
        <div class="demo">
          <bp-empty description="No content."></bp-empty>
        </div>
      </template>
    </bp-trigger>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref("left");
const optionList = [
  { value: "left", label: "Left" },
  { value: "top", label: "Top" },
  { value: "right", label: "Right" },
  { value: "bottom", label: "Bottom" },
];
const optionList2 = [
  { value: "left-top", label: "Left-Top" },
  { value: "left-bottom", label: "Left-Bottom" },
  { value: "right-top", label: "Right-Top" },
  { value: "right-bottom", label: "Right-Bottom" },
];
</script>

<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>

监听滚动容器

通过 update-at-scroll 监听外层滚动区域，实时更新浮层弹出位置

<template>
  <div :style="{ width: '100%', height: '140px', overflowY: 'scroll' }">
    <div :style="{ height: '300px', background: '#fafafa' }">
      <bp-space style="margin: 100px 0 0 0" align="center">
        <bp-trigger update-at-scroll>
          <bp-button type="plain">Click me</bp-button>
          <template #content>
            <div class="demo">
              <bp-empty description="No content."></bp-empty>
            </div>
          </template>
        </bp-trigger>
      </bp-space>
    </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 属性

popup-visible(v-model)	触发器绑定值	Boolean	false
trigger	触发方式	Enum	click
position	弹出位置	Enum	bottom
popup-offset	距离弹出位置的偏移量	Number	10
popup-translate	距离弹出位置的移动距离	[Number, Number]	[0, 0]
auto-fitWidth	弹出层是否填充触发器宽度	Boolean	false
transition	过渡动画名称	String	fade
click-outside	点击其他元素关闭触发器	Boolean	true
disabled	是否禁用	Boolean	false
hideTrigger	隐藏触发器	Boolean	false
updateAtScroll	是否跟随滚动元素更新	Boolean	false
scrollToClose	是否在滚动时关闭	Boolean	false
scrollToCloseTime	滚动触发关闭的时间	Number	400

触发器 Trigger ​

基础用法 ​

位置 ​

监听滚动容器 ​

Trigger 属性 ​

触发器 Trigger

基础用法

位置

监听滚动容器

Trigger 属性