如何在Vuetify的v-card中添加类v-input样式的标签？

你要给v-card加上像示例里select组件那样的悬浮标签效果，下面是几种实用的Vuetify实现方式：

方式一：用v-label配合自定义CSS定位 #

直接复用Vuetify的v-label组件，通过CSS调整位置模拟v-input的标签样式：

<template>
  <div class="card-wrapper">
    <v-label class="card-label" for="target-card">自定义卡片标签</v-label>
    <v-card id="target-card" class="pa-4">
      <!-- 卡片内部内容 -->
      <p>这是卡片里的内容</p>
      <v-btn type="button">操作按钮</v-btn>
    </v-card>
  </div>
</template>

<style scoped>
.card-wrapper {
  position: relative;
  margin-top: 24px; /* 给标签预留顶部空间 */
}

.card-label {
  position: absolute;
  top: -12px;
  left: 16px;
  background-color: #fff; /* 与页面背景色保持一致 */
  padding: 0 8px;
  font-size: 0.875rem;
}
</style>

这种方式直接对齐v-input的标签视觉效果，代码简洁易调整。

方式二：封装可复用的带标签卡片组件 #

如果多个页面需要这类卡片，封装成组件能减少重复代码：

<template>
  <div class="labeled-card-container">
    <v-label class="card-top-label" :for="cardId">{{ cardLabel }}</v-label>
    <v-card :id="cardId" class="card-inner">
      <slot></slot>
    </v-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
  cardLabel: {
    type: String,
    required: true
  },
  cardId: {
    type: String,
    default: () => `labeled-card-${Math.random().toString(36).slice(2, 10)}`
  }
})
</script>

<style scoped>
.labeled-card-container {
  position: relative;
  margin-top: 24px;
}

.card-top-label {
  position: absolute;
  top: -12px;
  left: 16px;
  background: #fff;
  padding: 0 8px;
}

.card-inner {
  padding: 16px;
}
</style>

使用时直接引入组件：

<LabeledCard cardLabel="用户信息卡片">
  <v-text-field placeholder="用户名"></v-text-field>
</LabeledCard>

方式三：复用v-input容器的取巧方案 #

不想写CSS的话，可以直接利用v-text-field的外层容器，把v-card替换输入框部分：

<template>
  <v-text-field label="卡片标签" readonly hide-details>
    <template v-slot:input>
      <v-card class="pa-4">
        <!-- 卡片内容 -->
        <v-list>
          <v-list-item>列表项1</v-list-item>
          <v-list-item>列表项2</v-list-item>
        </v-list>
      </v-card>
    </template>
  </v-text-field>
</template>

这种方式完全复用v-input的标签样式和交互逻辑，最快实现需求，适合快速原型开发。

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