Li-Daisy

Appearance

Popover弹出框 ​

用于在页面上显示额外信息或操作

基础用法 ​

通过 trigger 插槽和 content 插槽来定义触发器和弹出内容

vue
<template>
  <div class="w-full flex justify-center">
    <Popover position="bottom" trigger="hover" :z-index="100">
      <template #trigger>
        <button class="btn btn-primary">trigger</button>
      </template>
      <template #content>
        <Card />
      </template>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Popover } from 'li-daisy'

import Card from '../demo/Card.vue'
</script>

设置trigger ​

可选值有 hover 和 click，默认为 hover

vue
<template>
  <div class="w-full flex justify-between">
    <Popover trigger="hover" :z-index="100">
      <template #trigger>
        <button class="btn btn-primary">hover</button>
      </template>
      <template #content>
        <Card />
      </template>
    </Popover>
    <Popover trigger="click" :z-index="100">
      <template #trigger>
        <button class="btn btn-primary">click</button>
      </template>
      <template #content>
        <Card />
      </template>
    </Popover>
  </div>
</template>

<script setup lang="ts">
import { Popover } from 'li-daisy'
import Card from '../demo/Card.vue'
</script>

设置位置 ​

可选值有 top, top-start, top-end, bottom, bottom-start, bottom-end, left, left-start, left-end, right, right-start, right-end，默认为 bottom

智能定位

为了保证 content 插槽的内容尽量全部可见，Popover 组件会根据视口边界自动调整位置：

  • 优先使用指定位置：首先尝试在设定的 position 位置显示
  • 自动避让边界：当内容可能被视口边缘裁剪时，会自动切换到相反或相邻的位置
  • 保持对齐关系：调整后仍会尽量保持与触发器的对齐关系（如 top-start 可能调整为 bottom-start）
  • 智能回退机制：如果所有预设位置都无法完全显示，会选择显示区域最大的位置
  • 唤起后不变性：当弹出框显示后，位置会保持固定，不会因为滚动或窗口大小变化而重新计算位置，直到下次重新唤起时才会根据新的环境重新定位

例如：设置 position="top" 但上方空间不足时，会自动调整为 bottom 位置显示

下述示例中可以尝试滚动屏幕让 top 按钮处于当前屏幕较高位置，此时再去点击，悬浮框内容位置将变为 bottom

top-start
top
top-end
left-start
left
left-end
Popover 位置示例
right-start
right
right-end
bottom-start
bottom
bottom-end
vue
<template>
  <div class="flex flex-col items-center gap-y-6 p-8 min-w-md">
    <!-- 顶部位置组 -->
    <div class="flex items-center gap-x-4">
      <Popover
        v-for="position in topPositions"
        :key="position"
        :position="position"
        trigger="click"
      >
        <template #trigger>
          <div class="btn btn-sm min-w-24">{{ position }}</div>
        </template>
        <template #content>
          <Card />
        </template>
      </Popover>
    </div>

    <!-- 中间位置组 -->
    <div class="flex items-center justify-between w-full">
      <!-- 左侧组 -->
      <div class="flex flex-col gap-y-3">
        <Popover
          v-for="position in leftPositions"
          :key="position"
          :position="position"
          trigger="click"
          :z-index="999"
        >
          <template #trigger>
            <div class="btn btn-sm min-w-24">{{ position }}</div>
          </template>
          <template #content>
            <Card />
          </template>
        </Popover>
      </div>

      <!-- 中心说明 -->
      <div class="flex items-center justify-center">
        <div class="badge badge-outline">Popover 位置示例</div>
      </div>

      <!-- 右侧组 -->
      <div class="flex flex-col gap-y-3">
        <Popover
          v-for="position in rightPositions"
          :key="position"
          :position="position"
          trigger="click"
        >
          <template #trigger>
            <div class="btn btn-sm min-w-24">{{ position }}</div>
          </template>
          <template #content>
            <Card />
          </template>
        </Popover>
      </div>
    </div>

    <!-- 底部位置组 -->
    <div class="flex items-center gap-x-4">
      <Popover
        v-for="position in bottomPositions"
        :key="position"
        :position="position"
        trigger="click"
      >
        <template #trigger>
          <div class="btn btn-sm min-w-24">{{ position }}</div>
        </template>
        <template #content>
          <Card />
        </template>
      </Popover>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Popover, type PopoverPositon } from 'li-daisy'
import Card from '../demo/Card.vue'

const topPositions: Array<PopoverPositon> = ['top-start', 'top', 'top-end']
const leftPositions: Array<PopoverPositon> = ['left-start', 'left', 'left-end']
const rightPositions: Array<PopoverPositon> = ['right-start', 'right', 'right-end']
const bottomPositions: Array<PopoverPositon> = ['bottom-start', 'bottom', 'bottom-end']
</script>

API ​

Attributes ​

Props ​

属性值说明类型默认值
position对齐位置PopoverPositonbottom
trigger触发时机['hover','click']click
offset偏移距离(px)number6
duration弹出过渡动画持续时间number250
close-on-click-outside点击外部关闭弹出框booleantrue
close-on-escapeesc关闭弹出框booleantrue
z-indexz-index值number0

Event ​

名称说明类型
show弹出框显示时() => void
hide弹出框隐藏时() => void
toggle弹出框状态切换(visible: boolean) => void

Expose ​

方法名说明类型
show显示弹出框() => void
hide隐藏弹出框() => void
toggle切换弹出框状态() => void
visible弹出框状态值boolean

Slots ​

名称说明
trigger触发器内容
content弹出框内容