HeadlessUI/Vue 中的 PopoverPanel 指向文本指针添加指南

vue.js

2024-03-15 08:39:44

为 HeadlessUI/Vue 中的 PopoverPanel 添加指向文本的指针

概述

在使用 @headlessui/vue 库构建工具提示菜单时，你可能希望在文本悬停时显示指向文本的指针。本文将分步指导你如何实现此功能。

步骤

1. 导入 Tailwind CSS 样式

首先，导入 Tailwind CSS 样式：

在 tailwind.config.js 中更新 content 数组，包含 @headlessui/vue/dist/components.css 和 tailwindcss/tailwind.css。

2. 创建自定义 CSS 类

定义一个用于指针样式的自定义 CSS 类：

在 styles.css 中，添加以下类：

.popover-arrow {
  position: absolute;
  bottom: -5px;
  left: calc(50% - 5px);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid white;
}

3. 添加自定义 CSS 类到 PopoverPanel

将自定义 CSS 类添加到 PopoverPanel 组件：

在 Vue 组件中，更新 PopoverPanel 的 class 属性，添加 popover-arrow 类。

4. 调整 PopoverPanel 位置

为了对齐指针和文本，需要调整 PopoverPanel 的位置：

在 Vue 组件中，在 PopoverPanel 组件上添加 style 属性，左偏移 10px。

代码示例

<Popover>
  <PopoverButton>
    <p @mouseover="openPopover" @mouseleave="closePopover">Hover Me</p>
  </PopoverButton>

  <PopoverPanel>
    <div class="popover-arrow"></div>
    <slot>Text to be shown on hover over</slot>
  </PopoverPanel>
</Popover>