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

ivqmmu1c 于 2022-12-14 发布在 Vue.js

关注(0)|答案(2)|浏览(316)

我有一个小问题，使用工具提示或弹出在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})
      }
    }
  },

vue.js

来源：https://stackoverflow.com/questions/67674150/bootstrap-5-tooltip-popover

2条答案

按热度按时间

6yjfywim1#

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

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

Demo

赞(0）回复(0）举报 2022-12-14

wb1gzix02#

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

我的答案灵感来自Sergio Azócar的answer，我使用了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>

赞(0）回复(0）举报 2022-12-14

我来回答

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

2条答案

相关问题

热门标签

最新问答