Question

我对vue.js很陌生，我想问问是否可以使用箭头更改选项卡（内容）？我正在使用带有show-arrows =“ true”的v-tab。

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

我的理想输出是单击左右箭头以更改选项卡（内容）。

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

谢谢！：）

    <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

也许可以将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

Answer 2

我不知道原生的vuetify解决方案，但是您可以使用一些很好的旧的javascript来实现。

在mounted上，您可以在下一个/上一个箭头上创建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>

v标签：使用箭头更改标签

2 个答案: