我正在尝试为vuetify2中的垂直滑块设置特定的高度。我尝试通过height =“ 800px”和style =“ height:800px”来尝试,但是没有达到预期的效果。
我的网格的框被扩展了,但是滑块的高度没有改变。
我用
<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来调整滑块的高度,如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>