本文介绍了使用具有较少项目的v幻灯片组时出现问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我的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幻灯片组时出现问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！