在内部点击时隐藏弹出框答案

【问题标题】：Hiding Popover on internal click在内部点击时隐藏弹出框
【发布时间】：2021-08-15 22:53:38
【问题描述】：

我目前正在使用Vue-PopperJS，并且已经按照附件中的链接进行了一些细微的更改：

<template>
  <Popper
    ref="popover"
    trigger="clickToToggle"
    :options="{
      placement: position,
    }"
  >
    <slot
      slot="reference"
      name="activator"
    />
    <div class="base-dropdown--dropdown popper">
      <slot name="popover" />
    </div>
  </Popper>
</template>

<script>
import Popper from 'vue-popperjs'
import 'vue-popperjs/dist/vue-popper.css'

export default {
  name: 'BaseDropdown',
  components: {
    Popper
  },
  props: {
    position: {
      type: String,
      default: 'bottom'
    }
  }
}
</script>

<style scoped lang="sass">
.base-dropdown
  &--dropdown
    min-width: 180px
    @apply rounded-large shadow-sm
</style>

对于弹出框内的项目，我们创建了另一个组件，如下所示：

<template>
  <div
    class="base-dropdown-item"
    :class="getDropdownItemClass"
    @click="$emit('click')"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: 'BaseDropdownItem',
  props: {
    hoverable: {
      type: Boolean,
      required: false
    }
  },
  computed: {
    getDropdownItemClass () {
      if (this.hoverable) return ['hover:bg-blue']
      return []
    }
  }
}
</script>

<style scoped lang="sass">
.base-dropdown-item
  text-overflow: ellipsis
  padding: 12px 0 12px 12px
  @apply cursor-pointer body-3 flex items-center overflow-hidden text-grey-800 transition-all whitespace-nowrap

  &:hover
    @apply text-black
</style>

我的问题是，假设我点击了弹出框内容（即，一个按钮做某事），我怎样才能触发它来关闭弹出框呢？

我知道有一个事件可以隐藏它，但我不知道如何使用它。

如果您需要更多信息，请随时询问！

【问题讨论】：

不幸的是，我不认为你可以用插槽做到这一点。您需要在 BaseDropdown 组件中捕获从 BaseDropdownItem 组件发出的click 事件并调用this.$refs.popover.hide()。我建议重构您的 BaseDropdown 组件以接受一组项目，以便它可以在内部呈现它们。
或者从技术上讲，如果您将ref="dropdown" 添加到您的<base-dropdown> 组件，您可以从父组件调用popover hide 函数。然后在父母中它看起来像this.$refs.dropdown.$refs.popover.hide()。

标签： javascript vue.js popper.js

【解决方案1】：

不确定此解决方案的“效率”如何。然而，Chase DeAnda 的评论让我想到了一个优雅的解决方案。

我最终使用了EventBus，它可以使用$emit('close-popver')。该发射将来自在 @click 上调用此方法的任何内容（在本例中为 <BaseDropDownItem /> 组件）。

methods: {
  handleClick() {
    this.$emit('click')
    EventBus.$emit('close-popover')
  }
}

然后关闭弹出框：

closePopover(){
  const { popover } = this.$refs
  popover.doClose()
}

【讨论】：