在 Vuetify 中调整 v-list-tile 的高度答案

【问题标题】：Adjusting height of v-list-tile in Vuetify在 Vuetify 中调整 v-list-tile 的高度
【发布时间】：2019-01-02 11:25:57
【问题描述】：

CodePen

相关部分是：

<v-list-tile>
  <v-list-tile-content>
    <div>
      This is some content that's a little tall.<br />
      Maybe there's a lot of stuff that goes here.<br />
      Or maybe I'm using a third party control.<br />
      Either way, how can I adjust the height?
    </div>
  </v-list-tile-content>
</v-list-tile>

我有一个包含列表的 Vuetify 菜单。列表项之一高于基本样式中设置的 48px。有没有办法在标记中优雅地调整它？还是需要用css来调整？

【问题讨论】：

仅供参考 - vuetify 有一个不和谐的频道，vuetify 的开发者（以及非开发者）可以帮助解决这些问题。
我已经在那里发布了一些问题，但没有任何回应。我可以在那里交叉发布。
你需要使用css。或者你可以试试<v-list three-line>。
关于如何可靠地定位单个 v-list-tile（最后一个）的任何提示？我似乎无法将 ID 或自定义类附加到组件本身。

标签： vue.js vuetify.js

【解决方案1】：

根据文档，您可以使用two-line 或three-line 增加<v-list> 中项目的大小

除此之外，建议您使用卡片：

对于三行列表，字幕将垂直夹在 2 行，然后省略。如果需要超过 3 行，建议使用card。

v-list 的目的是强制重复元素的高度一致，所以如果你需要超过三行来传达一个特定的点，那么使用可以覆盖更多区域并使用的重复卡片元素可能是有意义的案例。

【讨论】：