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

Posted 2023-02-23

【中文标题】bootstrap-vue：如何识别 b-tab 上的悬停事件

【英文标题】：bootstrap-vue : how to recognize hover event over b-tab

【发布时间】：2020-06-02 17:47:15

【问题描述】：

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

在下面的Codepen example 中，我可以在图像悬停时隔离事件，但是我想在标题（例如“试管和小瓶”）悬停时隔离事件。

我对 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"
                            >
                    </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>

【参考方案1】：

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

<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"
      >
    </b-img>
  </b-tab>
</b-tabs>

【讨论】：

谢谢！我尝试了一个模板，但没有想到将鼠标事件放在 div 中

还有一个新的v-b-hover 指令，您可以将它放在 div 中，每当悬停状态发生变化时，它都会调用一个函数。 bootstrap-vue.js.org/docs/directives/hover

【参考方案2】：

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

但是，您仍然可以通过隐藏标准选项卡并使用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"
                   >
            </b-img>
          </b-tab>
        </b-tabs>
      </b-col>
    </b-row>
  </div>
</b-container>