v-tabs：使用箭头更改选项卡

Question

我是 vue.js 的新手，我想问一下是否可以使用箭头更改选项卡（内容）？我正在使用带有 show-arrows="true".

的 v-tabs

目前，我必须单击文本（例如星期一）才能更改内容。

我理想的输出是点击左右箭头改变标签（内容）。

例如单击向右箭头将更改为星期二的内容。

谢谢！ :)

    <div class="container--fluid days-header">
      <div>
        <v-card width="250" flat tile>
          <v-tabs
            show-arrows="true"
            dark
            background-color="grey darken-3"
            center-active
            v-model="activeDay"
          >
            <!-- <v-tabs-slider color="grey lighten-3"></v-tabs-slider> -->

            <v-tab v-for="item in items" :key="item.id" @click="newDay(item.id)">{{item.name}}</v-tab>
          </v-tabs>
        </v-card>
      </div>
    </div>

Answer 1

我不知道原生的 vuetify 解决方案，但你可以用一些好的旧香草来做到这一点 javascript。

在 mounted 上，您可以在 next/previous 箭头上创建一个 clickEvent 并自行处理更改。因此，每当单击该图标时，activeDay 就会增加或减少一个。

<script>
export default {
  data() {
    return {
      activeDay: 0,
      items: ["Monday", "Tuesday", "Wednesday", "Thursday"]
    };
  },
  mounted() {
    // setup click event for next icon
    document
      .getElementsByClassName("v-slide-group__next")[0]
      .addEventListener("click", () => {
        this.activeDay++;
      });
    // setup click event for previous icon
    document
      .getElementsByClassName("v-slide-group__prev")[0]
      .addEventListener("click", () => {
        this.activeDay--;
      });
  }
};
</script>

Answer 2

也许将 slide-group 组件与 tabs...

一起使用

       <v-slide-group center-active show-arrows v-model="activeDay">
                <template v-slot:prev>
                    <v-btn text @click="prev()"><v-icon>mdi-chevron-left</v-icon></v-btn>
                </template>
                <v-slide-item v-for="d in items" :key="d.id" v-slot:default="{ active, toggle }">
                    <v-btn class="mx-2"
                        :input-value="active" 
                        active-class="purple white--text" 
                        depressed 
                        @click="setActive(d.id)"> {{ d.name }}
                    </v-btn>
                </v-slide-item>
                <template v-slot:next>
                   <v-btn text @click="next()"><v-icon>mdi-chevron-right</v-icon></v-btn>
                </template>
       </v-slide-group>
       <v-tabs show-arrows="true" v-model="activeDay">
                <v-tab-item v-for="item in items" :key="item.id">{{item.name}}</v-tab>
       </v-tabs>

演示：https://codeply.com/p/MR3Sajw9kt

v-tabs：使用箭头更改选项卡

v-tabs: Using arrows to change tabs

tabs

vue.js

vuetify.js