Javascript 在内部单击时隐藏Popover

我目前正在使用，并且已经在附加的链接上进行了设置，只是做了一些细微的更改：

<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>

从“vue popperjs”导入Popper
导入“vue popperjs/dist/vue popper.css”
导出默认值{
名称：“BaseDropdown”，
组成部分：{
波普尔
},
道具：{
职位：{
类型：字符串，
默认值：“底部”
}
}
}
.基本下拉列表
&--下拉列表
最小宽度：180像素
@应用圆形大阴影sm

对于popover中的项目，我们创建了另一个组件，如下所示：

<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>

导出默认值{
名称：“BaseDropdownItem”，
道具：{
可悬停：{
类型：布尔型，
必填项：false
}
},
计算：{
getDropdownItemClass（）{
如果（this.hoverable）返回['hover:bg blue']
返回[]
}
}
}
.基本下拉项
文本溢出：省略号
填充：12px 0 12px 12px
@应用光标指针主体-3弹性项目中心溢出隐藏文本-GRY-800过渡所有空白nowrap
&：悬停
@应用文本黑色

我的问题是，假设我点击了popover内容（即，一个按钮可以做些什么），我如何触发它来关闭popover呢

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

---

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

不确定这个解决方案的“效率”如何，但是Chase DeAnda的评论给了我一个优雅解决方案的想法

我最终使用了

EventBus

，它将

$emit（'close-popver'）

。此发射将来自在

@单击上调用此方法的任何组件（在本例中为
组件）

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

要关闭popover，请执行以下操作：

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

不幸的是，我不认为你能用老虎机做到这一点。您需要捕获从BaseDropdownItem组件中的BaseDropdownItem组件发出的
事件，并调用
this.$refs.popover.hide（）
。我建议重构BaseDropdown组件以接受项目数组，这样就可以在内部呈现它们。或者，从技术上讲，如果您向
组件添加
ref=“dropdown”
，则可以从父组件调用popover hide函数。然后在父级中，它看起来像
this.$refs.dropdown.$refs.popover.hide（）
。