在内部点击时隐藏弹出框

Question

I'm currently using Vue-PopperJS , and have pretty much set it up as they have on the attached link with some slight changes:

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

And for the items inside the popover we created another component like so:

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

My question is, say I click on the popover content (ie, a button that does something), how can I trigger it to close the popover too?

I know there is an event to hide it but I'm not sure how to use it.

Should you need more information please don't hesitate to ask!

Answer 1

Not sure how 'efficient' this solution is. However, Chase DeAnda's comment gave me an idea for an elegant solution.

I ended up using the EventBus that would $emit('close-popver') . This emit would be from whatever (in this case a <BaseDropDownItem /> component) that calls this method on a @click .

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

And to close the popover:

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