自己写Popover组件，实现任意组件的悬浮显示

2023-12-28 20:43:15

实现定制 Popover 组件的逐步指南

什么是 Popover 组件？

Popover 组件是一种浮动显示元素，通常用于在按钮或链接上附加提示信息或其他额外内容。它会在鼠标悬停在触发元素上时自动出现，并在鼠标移开时自动消失。

自己实现 Popover 组件的步骤

创建 Popover 组件

首先，我们需要创建一个 Popover 组件。我们可以使用流行的前端框架，如 Vue、React 或 Angular，来构建这个组件。这里，我们将使用 Vue 作为示例：

<template>
  <div class="popover">
    <div class="popover-content">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    content: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
.popover {
  position: absolute;
  display: none;
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.popover-content {
  padding: 5px;
}
</style>

将 Popover 组件添加到触发元素

接下来，我们需要将 Popover 组件添加到触发元素中。我们可以使用 v-bind 指令动态绑定 Popover 组件的 content 属性：

<button @mouseover="showPopover" @mouseout="hidePopover">
  <span>悬停我</span>
  <popover v-bind:content="popoverContent"></popover>
</button>

显示和隐藏 Popover 组件

最后，我们需要编写方法来显示和隐藏 Popover 组件。我们可以利用 Vue 的 mounted 和 destroyed 生命周期钩子：

export default {
  mounted() {
    this.popover = new Popper(this.$el, this.$refs.popover, {
      placement: 'top',
      modifiers: {
        preventOverflow: {
          enabled: true,
          boundariesElement: 'viewport'
        }
      }
    })
  },
  destroyed() {
    this.popover.destroy()
  },
  methods: {
    showPopover() {
      this.popover.show()
    },
    hidePopover() {
      this.popover.hide()
    }
  }
}