Popper 气泡

常用于展示鼠标 click或hover时的提示信息。

基础用法

点击后触发气泡

使用 content 属性来决定提示信息。由 placement 属性决定展示效果： placement属性值为：[方向]-[对齐位置]；四个方向：top、left、right、bottom；三种对齐位置：start, end，默认为空。如 placement="left-end"，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。

placement也可也传入auto,auto-left,auto-right,auto将选择空间最大的一侧

<template>
  <div class="popper-box">
    <div class="row center">
      <etu-popper content="这是一个top-start" placement="top-start">
        <etu-button>top-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top" placement="top">
        <etu-button>top</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top-end" placement="top-end">
        <etu-button>top-end</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-start" placement="left-start">
        <etu-button>left-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" placement="right-start">
        <etu-button>right-start</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left" placement="left">
        <etu-button>left</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" placement="right">
        <etu-button>right</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-end" placement="left-end">
        <etu-button>left-end</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-end" placement="right-end">
        <etu-button>right-end</etu-button>
      </etu-popper>
    </div>
    <div class="row center">
      <etu-popper content="这是一个bottom-start" placement="bottom-start">
        <etu-button>bottom-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom" placement="bottom">
        <etu-button>bottom</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom-end" placement="bottom-end">
        <etu-button>bottom-end</etu-button>
      </etu-popper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popper-box {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .center {
    justify-content: center;
  }
}
</style>

<template>
  <div class="popper-box">
    <div class="row center">
      <etu-popper content="这是一个top-start" placement="top-start">
        <etu-button>top-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top" placement="top">
        <etu-button>top</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top-end" placement="top-end">
        <etu-button>top-end</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-start" placement="left-start">
        <etu-button>left-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" placement="right-start">
        <etu-button>right-start</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left" placement="left">
        <etu-button>left</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" placement="right">
        <etu-button>right</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-end" placement="left-end">
        <etu-button>left-end</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-end" placement="right-end">
        <etu-button>right-end</etu-button>
      </etu-popper>
    </div>
    <div class="row center">
      <etu-popper content="这是一个bottom-start" placement="bottom-start">
        <etu-button>bottom-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom" placement="bottom">
        <etu-button>bottom</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom-end" placement="bottom-end">
        <etu-button>bottom-end</etu-button>
      </etu-popper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popper-box {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .center {
    justify-content: center;
  }
}
</style>

hover时触发

使用hover属性来让气泡在hover时触发

<template>
  <div class="popper-box">
    <div class="row center">
      <etu-popper content="这是一个top-start" hover placement="top-start">
        <etu-button>top-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top" hover placement="top">
        <etu-button>top</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top-end" hover placement="top-end">
        <etu-button>top-end</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-start" hover placement="left-start">
        <etu-button>left-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" hover placement="right-start">
        <etu-button>right-start</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left" hover placement="left">
        <etu-button>left</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" hover placement="right">
        <etu-button>right</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-end" hover placement="left-end">
        <etu-button>left-end</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-end" hover placement="right-end">
        <etu-button>right-end</etu-button>
      </etu-popper>
    </div>
    <div class="row center">
      <etu-popper content="这是一个bottom-start" hover placement="bottom-start">
        <etu-button>bottom-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom" hover placement="bottom">
        <etu-button>bottom</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom-end" hover placement="bottom-end">
        <etu-button>bottom-end</etu-button>
      </etu-popper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popper-box {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .center {
    justify-content: center;
  }
}
</style>

<template>
  <div class="popper-box">
    <div class="row center">
      <etu-popper content="这是一个top-start" hover placement="top-start">
        <etu-button>top-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top" hover placement="top">
        <etu-button>top</etu-button>
      </etu-popper>
      <etu-popper content="这是一个top-end" hover placement="top-end">
        <etu-button>top-end</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-start" hover placement="left-start">
        <etu-button>left-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" hover placement="right-start">
        <etu-button>right-start</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left" hover placement="left">
        <etu-button>left</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-start" hover placement="right">
        <etu-button>right</etu-button>
      </etu-popper>
    </div>
    <div class="row">
      <etu-popper content="这是一个left-end" hover placement="left-end">
        <etu-button>left-end</etu-button>
      </etu-popper>
      <etu-popper content="这是一个right-end" hover placement="right-end">
        <etu-button>right-end</etu-button>
      </etu-popper>
    </div>
    <div class="row center">
      <etu-popper content="这是一个bottom-start" hover placement="bottom-start">
        <etu-button>bottom-start</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom" hover placement="bottom">
        <etu-button>bottom</etu-button>
      </etu-popper>
      <etu-popper content="这是一个bottom-end" hover placement="bottom-end">
        <etu-button>bottom-end</etu-button>
      </etu-popper>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.popper-box {
  .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .center {
    justify-content: center;
  }
}
</style>

箭头

使用arrow属性来使用箭头

<template>
  <etu-popper content="这是一个带箭头bottom" hover arrow placement="bottom">
    <etu-button>带箭头</etu-button>
  </etu-popper>
</template>

<template>
  <etu-popper content="这是一个带箭头bottom" hover arrow placement="bottom">
    <etu-button>带箭头</etu-button>
  </etu-popper>
</template>

手动控制

使用show属性来手动控制popper

<template>
  <div>
    <etu-switch v-model="show"></etu-switch>
  </div>
  <etu-popper
    content="这是一个带箭头bottom"
    hover
    arrow
    placement="bottom"
    :show="show"
  >
    <etu-button>手动控制</etu-button>
  </etu-popper>
</template>

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

const show = ref(false);
</script>

<template>
  <div>
    <etu-switch v-model="show"></etu-switch>
  </div>
  <etu-popper
    content="这是一个带箭头bottom"
    hover
    arrow
    placement="bottom"
    :show="show"
  >
    <etu-button>手动控制</etu-button>
  </etu-popper>
</template>

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

const show = ref(false);
</script>

popper属性

属性名	说明	类型	可选值	默认值
placement	出现位置	string	top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end/auto/auto-start/auto-bottom	bottom
content	标题	string	—	—
disableClickAway	禁用当用户单击窗口外部时自动关闭它	boolean	—	false
hover	悬停时触发Popper	boolean	—	false
show	手动控制是否显示Popper	boolean	—	false
disabled	禁用Popper，已经打开的会被关闭	boolean	—	false
openDelay	延迟（ms）后打开Popper	number	—	false
closeDelay	延迟（ms）后关闭Popper	number	—	200
arrow	是否显示箭头	boolean	—	false
interactive	Popper应该是交互式的，如果为false，则当单击悬停时将关闭	boolean	—	true
locked	是否会自动动态翻转	boolean	—	false
content	如果内容只是一个简单的字符串，它可以作为prop传入	string	—	—

popper插槽

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

popper事件

事件名	说明	回调参数
open	显示时触发	—
close	关闭时触发	—

popper方法

方法名	说明
doOpen	打开popper（受openDelay延时影响）
doClose	关闭popper（受closeDelay延时影响）
open	强行打开popper（无延时）
close	强行关闭popper（无延时）
isOpen	当前的状态

Popper 气泡 #

基础用法 #

hover时触发 #

箭头 #

手动控制 #

popper属性 #

popper插槽 #

popper事件 #

popper方法 #