bootstrap-vue ：如何识别 b-tab 上的悬停事件

Question

我试图在选项卡标题悬停时更改 bootstrap-vue b-tabs 的活动选项卡，而不仅仅是在单击时。我无法隔离此事件。

在下面的Codepen example中，我可以在图像悬停时隔离事件，但是我想在标题（例如'Tubes and Vials'）悬停时隔离事件.

我是 Vue 的新手，所以如果这是一个简单的答案，我深表歉意，但我已经有一段时间没有为此苦苦挣扎了，也无法弄清楚。谢谢！

组件文件

<template>
    <b-container class="px-3" fluid>
        <div>
            <h3>Range Of Glass Products We Inspect</h3>
            <p>Anything formed from tubular glass</p>
        </div>
        <div>
            <b-tabs content-class="mt-3" align="left" class="vial-types" vertical>
                <b-tab
                        v-for="glassItem in productRange"
                        v-bind:key="glassItem.type"
                        v-bind:ref="glassItem"
                        v-bind:title="glassItem.type"
                        @mouseover.native="greet()"
                        @mouseleave.native="greet()"
                >
                    <b-img
                            v-bind:src="glassItem.image"
                            alt="Factory Image">
                    </b-img>
                </b-tab>
            </b-tabs>
        </div>
    </b-container>
</template>

<script>
    export default {
        name: "ProductRange",
        data() {
            return {
                productRange: [
                    {type: "Screw & Flanged Head", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Tubes and Vials", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Pipettes, Syringes, Filling Needles", image:"https://picsum.photos/400/400/",hover: false},
                    {type: "Ampoules", image:"https://picsum.photos/600/400/", hover: false},
                    {type: "Custom Geometries Per Customer Specification", image:"https://picsum.photos/600/400/", hover: false}
                ]
            }
        },
        methods: {
            greet: function () {
                console.log("Hovering");
            }
        }
    }
</script>

<style lang="sass">

</style>

Answer 1

遗憾的是，我认为没有内置的方法可以轻松做到这一点。

但是，您仍然可以通过隐藏标准选项卡并使用 b-nav 自己重建结构并绑定到 b-tabs v-model 来解决这个问题。

然后您可以将活动添加到 b-nav-item，因为它们将用作您的标签。

new Vue({
  el: "#app",
  data: {
    selectedTab: 0,
    productRange: [
      { 
        type: "Screw & Flanged Head", 
        image: "https://picsum.photos/600/400/" 
      },
      { 
       type: "Tubes and Vials", 
       mage: "https://picsum.photos/640/400/" 
      },
      {
        type: "Pipettes, Syringes, Filling Needles",
        image: "https://picsum.photos/400/400/"
      },
      { 
        type: "Ampoules", 
        image: "https://picsum.photos/600/400/" 
      },
      {
        type: "Custom Geometries Per Customer Specification",
        image: "https://picsum.photos/700/400/"
      }
    ]
  },
  methods: {
    greet: function() {
      console.log("hovering");
    },
    onTabHover(glassItem) {
      console.log("Tab hovered", glassItem)
    }
  }
});

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.4.2/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.4.2/dist/bootstrap-vue.min.js"></script>

<b-container id="app" class="px-3"fluid>
  <div>
    <h3>Range Of Glass Products We Inspect</h3>
    <p>Anything formed from tubular glass</p>
  </div>
  <div>
    <b-row>
      <b-col cols="auto">
        <b-nav pills vertical>
          <b-nav-item v-for="(glassItem, index) in productRange" 
                      :active="selectedTab === index"
                      @click="selectedTab = index"
                      @mouseenter="onTabHover(glassItem)">
            {{ glassItem.type }}
          </b-nav-item>
        </b-nav>
      </b-col>
      <b-col>
        <b-tabs v-model="selectedTab" 
                content-class="mt-3" 
                class="vial-types" 
                nav-class="d-none">
         <b-tab
                v-for="glassItem in productRange"
                :key="glassItem.type"
                :ref="glassItem"
                :title="glassItem.type"
                @mouseover.native="greet()"
                @mouseleave.native="greet()"
                >
            <b-img
                   :src="glassItem.image"
                   alt="Factory Image">
            </b-img>
          </b-tab>
        </b-tabs>
      </b-col>
    </b-row>
  </div>
</b-container>

Answer 2

您也可以使用 b-tab 的 title 插槽，然后在其中添加一个 hover/unhover 侦听器：

<b-tabs content-class="mt-3" align="left" class="vial-types" vertical>
  <b-tab
    v-for="glassItem in productRange"
    v-bind:key="glassItem.type"
    v-bind:ref="glassItem"
  >
    <template v-slot:title>
      <div
        @mouseover="hovered"
        @mouseleave="unHovered"
      >
        {{ glassItem.type }}
      </div>
    </template>
    <b-img
      v-bind:src="glassItem.image"
      alt="Factory Image">
    </b-img>
  </b-tab>
</b-tabs>

bootstrap-vue ：如何识别 b-tab 上的悬停事件

bootstrap-vue : how to recognize hover event over b-tab

vue.js

bootstrap-vue

组件文件