vue.js Bootstrap 5工具提示||弹出窗口

ivqmmu1c  于 2022-12-14  发布在  Vue.js
关注(0)|答案(2)|浏览(315)

我有一个小问题,使用工具提示或弹出在vue应用程序从 Bootstrap 。

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

一切都很完美
Edit:看起来像create指令执行的工作:

<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})
      }
    }
  },
6yjfywim

6yjfywim1#

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

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

Demo

wb1gzix0

wb1gzix02#

对于Vue3和Bootstrap 5,您可以使用指令

我的答案灵感来自Sergio Azócaranswer,我使用了TypeScript而不是JavaScript。

创建bootstrap.ts文件

import { Tooltip, Popover } from 'bootstrap'

export const tooltip = {
  mounted(el: HTMLElement) {
    const tooltip = new Tooltip(el)
  }
}

export const popover = {
  mounted(el: HTMLElement) {
    const popover = new Popover(el)
  }
}

在main.ts中添加

import { tooltip } from 'your_path/tooltip'

app
 .directive('tooltip', tooltip)
 .directive('popover', popover)
 .mount("#app");

"好好利用"

<button v-tooltip title="Hello world from a button!">
    I am a button
</button>

<div v-popover title="Hello world from a div!" data-bs-content="And with some amazing content">
  I am a div
</div>

相关问题