Popover 彈出框

點選 / 懸停觸發的資訊浮層。12 個方位、四種觸發方式、箭頭與寬度可自訂。

彈出框

<template>
  <div class="demo-col" style="padding: 40px 0">
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover title="標題" content="click 觸發（預設）" placement="top">
        <LhButton>click 頂部</LhButton>
      </LhPopover>
      <LhPopover content="click 觸發" placement="right" trigger="click">
        <LhButton>click 右側</LhButton>
      </LhPopover>
      <LhPopover content="focus 觸發" placement="bottom" trigger="focus">
        <LhButton>focus 底部</LhButton>
      </LhPopover>
      <LhPopover content="箭頭關閉 + 自訂寬度" placement="left" :arrow="false" :width="240">
        <LhButton>無箭頭 左側</LhButton>
      </LhPopover>
      <LhPopover content="嚴格按 left 定位" placement="left" :flip="false">
        <LhButton>flip=false</LhButton>
      </LhPopover>
    </div>
    <p class="demo-note">manual 觸發配 :visible.sync 手動控制；disabled 停用彈出；popperClass 自訂類別名。</p>
    <div class="demo-row" style="gap: 24px; flex-wrap: wrap; justify-content: center">
      <LhPopover :visible.sync="manual" content="由按鈕開關控制" placement="top" trigger="manual">
        <LhButton @click="manual = !manual">manual 開關（{{ manual ? '開' : '關' }}）</LhButton>
      </LhPopover>
      <LhPopover content="停用狀態" disabled>
        <LhButton disabled>disabled</LhButton>
      </LhPopover>
      <LhPopover content="延遲顯示/隱藏" placement="top" :show-after="300" :hide-after="500">
        <LhButton>showAfter/hideAfter</LhButton>
      </LhPopover>
    </div>
  </div>
</template>

<script>
export default {
  data: () => ({
    manual: false,
  }),
}
</script>

Props

屬性	說明	類型	預設值
placement	展示位置	'top' \| 'top-start' \| 'top-end' \| 'bottom' \| 'bottom-start' \| 'bottom-end' \| 'left' \| 'left-start' \| 'left-end' \| 'right' \| 'right-start' \| 'right-end'	'top'
flip	主軸方向空間不足時是否翻轉方向（預設開啟）；設 false 則嚴格按 placement 定位，允許溢出視埠	boolean	true
trigger	觸發方式	'click' \| 'hover' \| 'focus' \| 'manual'	'hover'
title	標題	string	—
visible	手動控制的顯示狀態（:visible.sync）	boolean	—
disabled	是否停用	boolean	false
arrow	是否顯示箭頭	boolean	true
width	彈出層寬度	string \| number	—
popperClass	彈出層自訂類別名	string	—
teleportTarget	彈出層掛載目標（選擇器或元素，預設 body；2.7 無 Teleport，host 移動實作）	string \| HTMLElement	—
showAfter	延遲顯示時間(ms)	number	—
hideAfter	延遲隱藏時間(ms)	number	—
themeVars	元件級主題變數，覆蓋 ConfigProvider 設定	Record<string, string>	—
bgPattern	元件級背景花紋，覆蓋 ConfigProvider 設定	string	—
sx	sx 快速佈局屬性（作用於觸發器根元素）	—	—

Slots

插槽	說明
default	觸發器
title	標題區（預設取 title prop）
content	氣泡正文（未傳時取 content prop）