Vuetify 3.x中v-list-item-action-text的替代方案求助

在Vuetify 3中，v-list-item-action-text组件已被移除，你可以通过以下两种方式实现原组件的核心功能（列表项右上角时间戳）：

方法一：利用 v-list-item 的 actions 插槽 #

v-list-item 内置的 actions 插槽专门用于放置列表项右侧的辅助内容，完全可以替代原组件：

<v-list-item>
  <v-list-item-title>项目进度同步</v-list-item-title>
  <v-list-item-subtitle>Q3季度复盘会议</v-list-item-subtitle>
  <template v-slot:actions>
    <span class="text-caption text-gray-500">2小时前</span>
  </template>
</v-list-item>

使用Vuetify内置的 text-caption 类匹配原组件的字体尺寸，text-gray-500 调整文字灰度，视觉效果和之前保持一致。

方法二：通过基础布局类自定义排版 #

如果需要更灵活的布局控制，直接用Flex布局属性实现内容与时间戳的左右分离：

<v-list-item class="justify-between">
  <div>
    <v-list-item-title>待办提醒</v-list-item-title>
    <v-list-item-subtitle>提交本周工作周报</v-list-item-subtitle>
  </div>
  <span class="text-caption text-gray-500 self-start">昨天 16:45</span>
</v-list-item>

• justify-between 让列表项内的内容自动分布在左右两侧
• self-start 确保时间戳与列表项顶部对齐，和原组件的位置一致

Vuetify 3的组件设计更偏向基础组件+插槽+工具类的组合，通过这些方式可以完全复刻原 v-list-item-action-text 的功能，还能根据需求灵活调整样式。

内容的提问来源于stack exchange，提问作者Matthew Vanlandingham