javascript - Vuetify2 垂直 slider 高度不可配置

Question

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

Answer 1

不幸的是，目前没有快捷方式来设置 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>