我正在尝试为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>


并在屏幕截图中获取结果-即高度未更改javascript - Vuetify2垂直滑块高度不可配置-LMLPHP

解决方案的任何人,或者可能是由于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>

07-24 09:44
查看更多