Popover 弹出框

弹出框组件用于在元素周围显示一些临时信息。当用户与触发元素交互时（点击或悬停），弹出框会在指定位置显示内容。

基础用法

最基础的弹出框用法。

在 github 中打开

展开代码

复制代码

<script lang="ts" setup>

</script>

<template>
  <ol-popover>
    <template #trigger>
      <ol-button>
        Popover
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <h4 class="!m-0">
          Buzz Lightyear
        </h4>
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          To infinity and beyond🚀
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

<style>

</style>

触发方式

使用 trigger 插槽来定义触发元素，弹出框内容可以是任意自定义内容。

在 github 中打开

展开代码

复制代码

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

const show = ref(false)
</script>

<template>
  <div class="flex gap-2">
    <ol-popover trigger="hover">
      <template #trigger>
        <ol-button>
          Hover
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
      </ol-card>
    </ol-popover>
    <ol-popover trigger="click">
      <template #trigger>
        <ol-button>
          Click
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
      </ol-card>
    </ol-popover>
    <ol-popover trigger="manual" :show="show">
      <template #trigger>
        <ol-button @click="show = !show">
          Manual
        </ol-button>
      </template>
      <ol-card class="border-none">
        <ol-card-header class="flex flex-col gap-2 p-1">
          <h4 class="!m-0">
            Buzz Lightyear
          </h4>
          <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
            To infinity and beyond🚀
          </p>
        </ol-card-header>
        <ol-card-footer class="space-x-2 p-1">
          <ol-button type="primary" @click="show = false">
            confirm
          </ol-button>
          <ol-button type="secondary" @click="show = false">
            Close
          </ol-button>
        </ol-card-footer>
      </ol-card>
    </ol-popover>
  </div>
</template>

箭头和位置

使用 placement 属性来定义弹出框的位置，使用 arrow 属性来定义是否显示箭头。

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover trigger="click" placement="right" :arrow="false">
    <template #trigger>
      <ol-button>
        Click Me
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          Who saw my arrow?
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

动画时间

使用 duration 属性来定义弹出框的动画时间。

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover :duration="2500">
    <template #trigger>
      <ol-button>
        Duration
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          I am as fast as lightning
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

偏移

使用 offset 属性来定义弹出框的偏移量。

在 github 中打开

展开代码

复制代码

<template>
  <ol-popover trigger="click" placement="right" :offset="480">
    <template #trigger>
      <ol-button>
        Offset
      </ol-button>
    </template>
    <ol-card class="border-none">
      <ol-card-header class="flex flex-col gap-2 p-1">
        <p class="!m-0 text-sm dark:text-gray-300 text-gray-600">
          Bye👋
        </p>
      </ol-card-header>
    </ol-card>
  </ol-popover>
</template>

属性

参数	说明	类型	默认值
trigger	触发方式	'hover' | 'click' | 'focus'	'click'
placement	弹出位置	'top' | 'bottom' | 'left' | 'right'	'bottom'
arrow	是否显示箭头	boolean	false
duration	动画持续时间(ms)	number	200

插槽

插槽名	说明
trigger	触发元素
default	弹出框内容