自定义组件 – 仿 Element 的 Popover 组件

2024-02-07 22:08:02

前言

本来计划自定义一个类似于日期选择器的组件，但由于需要一个弹出框组件作为容器来存放日期选择器，因此首先封装了一个弹出框。

弹出框布局

弹出框主要由两部分组成：弹出框的标题和弹出框的内容。为了使弹出框的位置更加灵活，使用了 CSS 的 position: absolute 属性。

弹出框标题

弹出框的标题是一个可选元素，可以用来显示弹出框的主题或目的。标题的样式可以通过 CSS 类名来控制，例如：

.popover-title {
  font-size: 14px;
  font-weight: bold;
  padding: 10px;
  border-bottom: 1px solid #ccc;
}

弹出框内容

弹出框的内容是弹出框的主体部分，可以包含任意 HTML 元素。内容的样式也可以通过 CSS 类名来控制，例如：

.popover-content {
  padding: 10px;
}

触发弹出框

弹出框可以通过各种事件来触发，例如点击按钮或悬停在某个元素上。使用 JavaScript 事件监听器可以轻松地实现这些触发器。例如：

const triggerElement = document.querySelector('.trigger');
const popoverElement = document.querySelector('.popover');

triggerElement.addEventListener('click', () => {
  popoverElement.classList.toggle('show');
});

定位弹出框

弹出框的位置可以通过 CSS 的 left 和 top 属性来控制。也可以使用 JavaScript 来计算弹出框的位置，例如：

const triggerElement = document.querySelector('.trigger');
const popoverElement = document.querySelector('.popover');

triggerElement.addEventListener('click', () => {
  const triggerRect = triggerElement.getBoundingClientRect();
  const popoverRect = popoverElement.getBoundingClientRect();

  popoverElement.style.left = `${triggerRect.left + triggerRect.width / 2 - popoverRect.width / 2}px`;
  popoverElement.style.top = `${triggerRect.top + triggerRect.height}px`;

  popoverElement.classList.toggle('show');
});

关闭弹出框

弹出框可以通过点击关闭按钮或在外部区域点击来关闭。使用 JavaScript 事件监听器可以轻松地实现这些关闭机制。例如：

const popoverElement = document.querySelector('.popover');
const closeButton = popoverElement.querySelector('.close-button');

closeButton.addEventListener('click', () => {
  popoverElement.classList.remove('show');
});

window.addEventListener('click', (event) => {
  if (!popoverElement.contains(event.target)) {
    popoverElement.classList.remove('show');
  }
});