将 Bootstrap 5工具提示添加到Vue 3

mjqavswn  于 2022-12-08  发布在  Bootstrap
关注(0)|答案(4)|浏览(315)

main.js

import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";

Component.vue

<template> 
                  <i
                class="fas fa-info-circle"
                data-bs-toggle="tooltip"
                data-bs-placement="top"
                title="Tooltip on top"
                ref="info"
              ></i>

</template>
<script>
import { Tooltip } from "bootstrap/dist/js/bootstrap.esm.min.js";

export default {
  mounted() {
    console.log(this.$refs.info);
    new Tooltip(this.$refs.info)
  },
}
</script>

我试着点击图标,但什么也没有出来。我这样做是不是错了?

cnjp1d6j

cnjp1d6j1#

只要使用import { Tooltip } from "bootstrap";,它就应该可以工作。
Demo

rkttyhzu

rkttyhzu2#

我也遇到过同样的问题。这个代码对我很有效。

import { Tooltip } from 'bootstrap'

export default {
  mounted() {
    new Tooltip(document.body, {
      selector: "[data-bs-toggle='tooltip']",
    })
  }
}
pqwbnv8z

pqwbnv8z3#

这里是一个更优雅和现代的解决方案,使用Typescript与新的Vue 3脚本设置。

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { Tooltip } from "bootstrap";

const info = ref(null);
let infoTooltip: Tooltip | undefined;

onMounted(() => {
  infoTooltip = new Tooltip(info.value!);
});
</script>

<template> 
  <i
    class="fas fa-info-circle"
    data-bs-toggle="tooltip"
    data-bs-placement="top"
    title="Tooltip on top"
    ref="info"
  ></i>
</template>
ghhkc1vu

ghhkc1vu4#

你可以创建一个指令“v-tooltip”并在任何html元素中使用。

创建文件工具提示.js

import { Tooltip } from 'bootstrap'

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

}

在main.js中添加

import { tooltip } from 'your_path/tooltip'

app.directive('tooltip', tooltip)

并使用它:

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

相关问题