Vuetify 实现鼠标悬停切换Tab

最新推荐文章于 2024-09-16 06:35:10 发布

@Forever

最新推荐文章于 2024-09-16 06:35:10 发布

阅读量1.8k

点赞数 2

分类专栏： Vuetify

Forever

本文链接：https://blog.csdn.net/ForeverBana/article/details/103547796

版权

Vuetify 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文介绍如何使用Vuetify实现鼠标悬停时自动切换Tab的功能，通过绑定mouseover事件并触发对应的tab点击，实现了平滑的用户体验。文章详细展示了代码实现过程，包括HTML结构、事件绑定及方法调用。

摘要由CSDN通过智能技术生成

Vuetify 实现鼠标悬停切换Tab

绑定事件

  <v-tabs
           class="light-green lighten-5"
                     :grow="true"
             >
                 <v-tab class="light-green lighten-5"
                        v-for="i in tables"
                        :key="i"
                        //点击目标连接地址
                        :href="`#tab-item-${i}`"
                        //vue 鼠标移过事件 传入 当前tab id
                        @mouseover="changetab(i)"
                        //自定义tab id
                        :id="i"
                 >
                     {{ i }}
                 </v-tab>

                 <v-tab-item
                         class="light-green lighten-5"
                         v-for="i in tables"
                         :key="i"
                         :value="'tab-item-' + i"
                 >
                      <v-card style="border: 0px"
                              class="text-left light-green lighten-5"
                      >
                          <v-card-text>
                              <div class="ranking_list_change_title">
                                  {{i}}} 
                              </div>
                          </v-card-text>
                      </v-card>
                  </v-tab-item>
              </v-tabs>

事件方法

methods: {
            changetab(id) {
            	//获取传入 tag di
                let tag = document.getElementById(id);
                tag.click();
            }
    }