Popup 气泡提示

基于指定节点的通用气泡提示框。

基本用法

通过 content 属性指定气泡内容。

<template>
  <i-popup>
    <i-button>悬浮提示</i-button>
    <template #content>提示内容</template>
  </i-popup>
</template>

显示代码复制代码复制代码

禁用状态

通过 disabled 属性控制气泡禁用。

<template>
  <i-popup disabled>
    <i-button>禁用气泡</i-button>
    <template #content>提示内容</template>
  </i-popup>
</template>

显示代码复制代码复制代码

不同触发方式

可通过 trigger 属性指定触发方式，默认为 hover。

<template>
  <div className="idesign-demo-block-row">
    <i-popup>
      <i-button>悬浮提示</i-button>
      <template #content>提示内容</template>
    </i-popup>
    <i-popup trigger="click">
      <i-button>点击提示</i-button>
      <template #content>提示内容</template>
    </i-popup>
    <i-popup trigger="context-menu">
      <i-button>右击提示</i-button>
      <template #content>提示内容</template>
    </i-popup>
  </div>
</template>

显示代码复制代码复制代码

不同触发方向

可通过 placement 属性指定气泡触发方向，默认为 top。

<template>
  <div class="idesign-demo-block-popup">
    <i-popup placement="top">
      <i-button class="Top">top</i-button>
      <template #content>气泡提示内容 top</template>
    </i-popup>
    <i-popup placement="top-start">
      <i-button class="TopLeft">top-start</i-button>
      <template #content>气泡提示内容 top-start</template>
    </i-popup>
    <i-popup placement="top-end">
      <i-button class="TopRight">top-end</i-button>
      <template #content>气泡提示内容 top-end</template>
    </i-popup>
    <i-popup placement="bottom">
      <i-button class="Bottom">bottom</i-button>
      <template #content>气泡提示内容 bottom</template>
    </i-popup>
    <i-popup placement="bottom-start">
      <i-button class="BottomLeft">bottom-start</i-button>
      <template #content>气泡提示内容 bottom-start</template>
    </i-popup>
    <i-popup placement="bottom-end">
      <i-button class="BottomRight">bottom-end</i-button>
      <template #content>气泡提示内容 bottom-end</template>
    </i-popup>
    <i-popup placement="left">
      <i-button class="Left">left</i-button>
      <template #content>气泡提示内容 left</template>
    </i-popup>
    <i-popup placement="left-start">
      <i-button class="LeftTop">left-start</i-button>
      <template #content>气泡提示内容 left-start</template>
    </i-popup>
    <i-popup placement="left-end">
      <i-button class="LeftBottom">left-end</i-button>
      <template #content>气泡提示内容 left-end</template>
    </i-popup>
    <i-popup content="气泡提示内容 right" placement="right">
      <i-button class="Right">right</i-button>
      <template #content>气泡提示内容 right</template>
    </i-popup>
    <i-popup placement="right-start">
      <i-button class="RightTop">right-start</i-button>
      <template #content>气泡提示内容 right-start</template>
    </i-popup>
    <i-popup placement="right-end">
      <i-button class="RightBottom">right-end</i-button>
      <template #content>气泡提示内容 right-end</template>
    </i-popup>
  </div>
</template>

显示代码复制代码复制代码

手动显示隐藏

通过 defaultVisible 属性显示默认显示隐藏，通过 visible 属性手动切换气泡显示隐藏。

无默认值

有默认值（非受控）

有固定值（受控）

通用方法

<template>
  <h4>无默认值</h4>
  <i-popup placement="right">
    <i-button>悬浮提示</i-button>
    <template #content>提示内容</template>
  </i-popup>
  <h4>有默认值（非受控）</h4>
  <i-popup placement="right" :defaultVisible="visible">
    <i-button>悬浮提示</i-button>
    <template #content>提示内容</template>
  </i-popup>
  <h4>有固定值（受控）</h4>
  <i-popup placement="right" :visible="visible">
    <i-button>悬浮提示</i-button>
    <template #content>提示内容</template>
  </i-popup>
  <h4>通用方法</h4>
  <i-popup placement="right" :visible="visible" @trigger="handleTrigger">
    <i-button>悬浮提示</i-button>
    <template #content>提示内容</template>
  </i-popup>
</template>

<script setup>
import { ref } from 'vue'
const visible = ref(true)

const handleTrigger = (val) => {
  visible.value = val
}
</script>

显示代码复制代码复制代码

Popup Attributes

属性	说明	类型	默认值
referenceClassName	触发节点类名	string	--
portalClassName	气泡内容类名	string	--
content	气泡提示内容	string〡HTMLElement	--
placement	气泡提示位置	"auto"〡"auto-start"〡"auto-end"〡"top"〡"top-start"〡"top-end"〡"bottom"〡"bottom-start"〡"bottom-end"〡"right"〡"right-start"〡"right-end"〡"left"〡"left-start"〡"left-end"	top
trigger	触发气泡出现的方式	"hover"〡"click"〡"context-menu"	hover
visible	气泡显示隐藏（受控）	boolean	--
defaultVisible	气泡显示隐藏（非受控）	boolean	false
disabled	是否禁用气泡	boolean	false
sameWidth	气泡是否与触发节点等宽	boolean	false
noPadding	去除内边距	boolean	false

Popup Slots

插槽名	说明
content	气泡内容

Popup Events

属性	说明	类型	默认值
trigger	触发气泡操作时触发	(visible: boolean) => void	--