在Vue.js中使用Element Popover：点击外部触发自动隐藏的疑难解答

前端

2024-01-04 07:13:19

*#*

在使用Element UI时，如果你遇到@click.stop导致Popover组件点击外部不会自动隐藏的问题，别担心，这不是你的错。本文将深入探讨这个问题并提供一个清晰的解决方案。

*#*

在Element UI中，Popover组件是一个轻量级的弹出层，可以用于显示各种信息，如提示、错误消息或其他相关内容。它提供了一个简单的界面，可以轻松配置和使用。

然而，在某些情况下，用户可能会遇到一个奇怪的问题，即使用@click.stop修饰符时，点击Popover外部不会触发自动隐藏。相反，Popover仍然可见，即使用户已经点击了外部区域。

这个问题通常发生在将Popover组件嵌入自定义组件或使用自定义触发器时。例如，如果你将Popover组件放置在应用程序的根组件中，它可能会按预期工作，但将其放置在自定义组件中可能会导致上述问题。

造成这个问题的原因是，@click.stop修饰符会阻止事件冒泡到父元素。这意味着当用户点击Popover外部时，该事件不会传播到父元素，从而阻止Popover自动隐藏。

要解决这个问题，有两种方法：

删除@click.stop修饰符： 这是一种简单直接的解决方案，可以允许事件冒泡到父元素并触发Popover的自动隐藏。但是，这可能会导致其他问题，具体取决于应用程序的具体实现。
使用v-click-outside指令： v-click-outside指令是一个Vue.js指令，可以用来监听元素外部的点击事件。当检测到点击时，它将执行一个回调函数，你可以在其中手动关闭Popover。

示例代码：

<template>
  <div>
    <el-popover v-model="visible" trigger="click" @click.stop>
      <p>Popover内容</p>
    </el-popover>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    const el = this.$el
    el.addEventListener('click', this.closePopover)
  },
  methods: {
    closePopover(e) {
      if (!this.$el.contains(e.target)) {
        this.visible = false
      }
    }
  }
}
</script>