bootstrap-vue：如何通过b-tab识别悬停事件

Question

我正在尝试将选项卡标题悬停，不仅是单击时，还会更改引导引导b选项卡的活动选项卡。我无法隔离此事件。

在下面的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模型来重建结构。

然后您可以将事件添加到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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/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>