我在使用v-slide-group時遇到一個問題，有時我有2~3個專案，有時我有10個專案或更多，但在專案較少的情況下，它不顯示箭頭，也不將slide-items放在中心。
<div id="app">
<v-app id="inspire">
<v-sheet
elevation="8"
class="mx-auto mt-10"
max-width="700"
>
<v-slide-group
多重
顯示箭頭
>
<v-slide-item
v-for="n in 25"
:key="n"
v-slot="{活動，切換}"
>
<v-btn
class="mx-2"
:input-value="active"
active-class="purple white-text"
壓低
圓形的
@click="toggle"
>
選項{{ n }}}。
</v-btn>
</v-slide-item>
</v-slide-group>
<v-slide-group
多重
顯示箭頭
>
<v-slide-item
v-for="n in 3"
:key="n"
v-slot="{活動，切換}"
>
<v-btn
class="mx-2"
:input-value="active"
active-class="purple white-text"
壓低
圓形的
@click="toggle"
>
選項{{ 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,
}),
方法:{
}
})
我還做了這個代碼本。https://codepen.io/mastergoshi/pen/rNwYJGz
我怎樣才能至少讓第二個幻燈片組的幻燈片專案居中？ 如果能在幻燈片專案居中的情況下顯示箭頭就更好了
。非常感謝！
uj5u.com熱心網友回復：
為了使幻燈片居中，你可以使用下面的css：
.v-slide-group__content {
justify-content: center;
}
你可以在這個codepen中看到例子。
根據vuetify的檔案：
默認情況下，當容器溢位時，箭頭總是顯示在桌面上。
所以如果你想顯示箭頭，你應該減少包裝容器的大小。否則，vuetify就不會顯示箭頭。
uj5u.com熱心網友回復：
從show-arrows道具的檔案中，我們有：
改變溢位的箭頭指示器何時顯示。默認情況下，當容器溢位時，箭頭總是在桌面上顯示。當容器在移動端溢位時，默認不顯示箭頭。show-arrows值為true時，如果容器溢位，允許這些箭頭在移動端顯示。如果值為desktop，就會在Desktop上顯示箭頭；如果值為mobile，就會在mobile上顯示箭頭。如果值為always，則總是在桌面和移動設備上顯示箭頭。
因此在v-slide-group上設定show-arrows="always"可以解決箭頭的可見性問題。
要使v-slide-items居中，只需把它們放在一排，如：
<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="styleheet">
<link href="https://cdn.jsdelivr. net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="styleheet">。
< link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="styleheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"/span>> </script>>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"/span>> </script>>
<div id="app">/span>
<v-app>/span>
<v-main>/span>
<v-container>/span>
<v-slide-group multiple show-arrows="always"/span>>/span>
< v-row justify="center" align="center" class="my-1">
<v-slide-item v-for="n in 3"/span> 。 key="n" v-slot="{ active, toggle }">
<v-btn class="mx-2"/span> : input-value="active" active-class="紫色white- text" depressed rounded @click="toggle">
選項 {{ n }}}
</v-btn>選項{{ n }}}。
</v-slide-item>/span>
</v-row>/span>
</v-slide-group>/span>
</v-container>/span>
</v-main>/span>
</v-app>/span>
</div>/span>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/310017.html
標籤：