我正在尝试为 vuetify2 中的垂直 slider 设置特定高度。我尝试通过 height="800px"和 style="height:800px"但没有预期的效果。
我的网格框得到扩展,但 slider 的高度没有改变。
我用
<v-container fluid>
<v-row>
...
<v-col lg="2">
<v-card class="pa-1" outlined tile>
<v-slider min="1" max="180" v-model="angle" @input="setAngle" vertical style="height:800px"/>
</v-card>
</v-col>
</v-row>
...
</v-container>
任何人的解决方案或者可能是由于 vuetify 2 的 2.0.x 版本?
最佳答案
不幸的是,目前没有快捷方式来设置 v-slider
的高度。 .
但是您仍然可以使用 css 来调整 slider 的高度,例如 vertical slider文档推荐。
这应该可以解决问题:CodePen
HTML
<v-slider min="1" max="180" vertical class="large-slider" prepend-icon="mdi-axis-y-rotate-clockwise"/>
CSS
.large-slider .v-slider {
height: 800px;
}
如果您使用 Single File Components使用作用域样式,你需要使用 vue 的 deep selectors为此:
<style scoped>
.large-slider >>> .v-slider {
height: 800px;
}
</style>
关于javascript - Vuetify2 垂直 slider 高度不可配置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57538643/