触发器 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>