Question

我在从 bootstrap 使用 vue 应用程序中使用工具提示或弹出框时遇到了一个小问题。

<template>
...
    <i :title="person.jobTitle" class="fa fa-tag" data-bs-placement="left" data-bs-toggle="tooltip" @click="showDetails"></i>
...
</template>

方法：

<script>
import {Popover} from "bootstrap";
...

methods: {
   showDetails(event) {
      new Popover(event.target)
   }
}
...
</script>

我 100% 确定我做错了什么:)。我必须点击两次才能显示弹出窗口，但它并没有关闭。

当我创建示例时：

    <button id="tolek" ref="tolek" title="aha" class="btn btn-secondary">
      Popover
    </button>

并在安装中：

new Popover(this.$refs.tolek)

一切都很美好。

编辑：看起来像创建指令做的工作：

<i title="Job Title" class="fa fa-tag" v-popover:click="person.jobTitle"></i>

指令：

  directives: {
    popover: {
      beforeMount(el, binding) {
        new Popover(el, {content: binding.value})
      }
    }
  },

Answer 1

不要将 BS data-bs- 属性与 Vue 混合使用。确保在实例化 popover 后使用 show() 方法...

    methods: {
       showDetails(event) {
          this.bsPopover = new Popover(event.target, {placement: 'left', trigger: 'click'})
          this.bsPopover.show()
       }
    }

Demo

Bootstrap 5 工具提示 ||弹出框

1 个答案: