使用具有较少项目的v幻灯片组时出现问题 [英] Problem when using v-slide-group with few items

问题描述

我的v幻灯片组有问题，有时我有2~3个项目，有时我有10个或更多项目，但项目较少时，它不会显示箭头，幻灯片项目也不会居中 以下是我的HTML：

    <div id="app">
  <v-app id="inspire">
    <v-sheet
    elevation="8"
    class="mx-auto mt-10"
    max-width="700"
  >
    <v-slide-group
      multiple
      show-arrows
    >
      <v-slide-item
        v-for="n in 25"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-btn
          class="mx-2"
          :input-value="active"
          active-class="purple white--text"
          depressed
          rounded
          @click="toggle"
        >
          Options {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>
      <v-slide-group
      multiple
      show-arrows
    >
      <v-slide-item
        v-for="n in 3"
        :key="n"
        v-slot="{ active, toggle }"
      >
        <v-btn
          class="mx-2"
          :input-value="active"
          active-class="purple white--text"
          depressed
          rounded
          @click="toggle"
        >
          Options {{ n }}
        </v-btn>
      </v-slide-item>
    </v-slide-group>
  </v-sheet>
  </v-app>
</div>

这是我的JS：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    model: null,
  }),
  methods:{

  }
})

我还制作了这个代码：https://codepen.io/mastergoshi/pen/rNwYJGz

如何至少将第二个幻灯片组中的幻灯片项目居中？ 更好的做法是在幻灯片项目居中的情况下也显示箭头

非常感谢！

推荐答案

来自show-arrows道具的文档：

更改溢出箭头指示器的显示时间。默认情况下，当容器溢出时，桌面上始终显示箭头。当容器在移动时溢出时，默认情况下不显示箭头。如果SHOW-ARROWS值为TRUE，则允许在容器溢出时在Mobile上显示这些箭头。"桌面"值始终在"桌面"上显示箭头，而"移动"值始终在"移动"上显示箭头。值始终在桌面和移动设备上显示箭头。

因此将show-arrows="always"设置为v-slide-group可解决箭头可见性问题。

要使v-slide-item居中，只需将它们放在一行中即可：

<v-row justify="center" align="center" class="my-1">
 <v-slide-item></v-slide-item>
</v-row>

查看以下演示：

Vue.config.productionTip = false;

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

<div id="app">
  <v-app>
    <v-main>
      <v-container>
        <v-slide-group multiple show-arrows="always">
          <v-row justify="center" align="center" class="my-1">
            <v-slide-item v-for="n in 3" :key="n" v-slot="{ active, toggle }">
              <v-btn class="mx-2" :input-value="active" active-class="purple white--text" depressed rounded @click="toggle">
                Options {{ n }}
              </v-btn>
            </v-slide-item>
          </v-row>
        </v-slide-group>
      </v-container>
    </v-main>
  </v-app>
</div>

这篇关于使用具有较少项目的v幻灯片组时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！