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

Question

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

如何在用户点击时启用弹出框？ 我在 Popper.js object 中没有看到任何“关闭”和“弹出”方法。 Popover 组件应该被触发单击按钮或元素上的 hover。

打开我应该在父组件中使用的 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 ，所以我的答案将基于该库。

我在 Popper.js object 中没有看到任何“关闭”和“弹出”方法。

它没有显示/隐藏方法，因为它只是一个定位引擎。

然而，它确实有更新/销毁实例的方法。

Popover 组件应该被触发单击按钮或元素上的 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 实例而不是总是创建/销毁，但这是由您决定和弄清楚的。