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 實例而不是總是創建/銷毀，但這是由您決定和弄清楚的。