Popper.js 如何在点击时启用它

Question

我需要制作一个通用的弹出窗口组件，用于在页面上的元素中显示诸如过滤器和菜单之类的内容。为此，我正在使用 Popper.js

如何在用户点击时启用弹出窗口？我在 Popper.js 对象中没有看到任何“关闭”和“弹出”方法。应在单击按钮或将鼠标悬停在元素上时触发弹出框组件。

打开 Popover 元素我应该在父组件中使用这个

<ci-popover>
  <template
    slot-scope="popover"
    #action
  >
    <ci-button @click="popover.toggle()">
      Open Popover
    </ci-button>
  </template>
  <!-- Popover content -->
</ci-popover>

弹出框组件

<template>
  <div :class="[ci-popover, `ci-popover--background-color-${variant}`,`ci-divider--padding-${padding}`]">
    <div ref="button">
    <slot name="action" :toggle="toggle" :close="close"></slot>
     </div>
    <div ref="tooltip">
      <h1>Hello popover</h1>
    </div>
    </div>
</template>

<script lang="ts">
  /*some imports*/
  import { createPopper, Instance } from '@popperjs/core';

  @Component
  export default class CiPopover extends Vue {
    /*Props*/

    created() {
      this.onOpen();
    }
    beforeDestroy() {
      this.onClose();
    }

    public close(): void {
      console.log('close method');
      
    }
    public toggle(): void {
      console.log('toggle method');//shoud "trigger" popover to show
    }

    @Emit('open')
    onOpen() {
      console.log("emit:open")
    }
    @Emit('close')
    onClose() {
      console.log("emit:close");
    }
    popperInstance = null as Instance | null
    mounted() {
      this.popperInstance = createPopper(this.$refs.button, this.$refs.tooltip, {
        placement: 'top',
      });
    } 
  }
</script>

<ci-popover variant="emphasis"
                padding="md"
                placement="top"
                @open="ciPopoverOnOpen"
                @close="ciPopoverOnClose">
      <template slot-scope="popover" slot="action">

        <ci-button @click="popover.toggle()">
          Open Popover
        </ci-button>
        <ci-button @click="popover.close()">
          Close popover
        </ci-button>
      </template>
      <!-- Popover content -->
      
    </ci-popover>

Answer 1

您似乎在使用 popper.js，因此我的回答将基于该库。

I did not see any "close" and "popup" methods in Popper.js object.

它没有方法，因为它只是一个定位引擎。

它确实但是有updating/destroying一个实例的方法。

Popover component should be triggered clicking on button or hover on a element.

您可以在 click/hover 一个元素时创建一个实例。

<template>
  <div>
    <div ref="reference">
      Something
    </div>

    <button
      ref="button"
      @click="onButtonClick"
    >
      Trigger
    </button>
  </div>
</template>

<script>
import { createPopper } from "@popperjs/core";

export default {
  data() {
    return {
      popper: null,
    }
  },

  methods: {
    onButtonClick() {
      if (this.popper === null) {
        this.popper = createPopper(this.$refs.button, this.$refs.reference, { ...yourOptions })
      } else {
        this.popper.destroy()
        this.popper = null
      }
    }
  },

  beforeDestroy() {
    if (this.popper !== null) {
      this.popper.destroy()
    }
  }
}
</script>

您可能只使用一个 popper 实例而不是总是 creating/destroying 就可以逃脱，但这由您决定和弄清楚。

Popper.js 如何在点击时启用它

Popper.js how to enable it on click

typescript

vue.js

popper.js