实现v-img hover时添加遮罩并居中显示按钮的Vuetify方案

利用v-img内置的overlay插槽配合CSS hover伪类就能实现需求，无需额外依赖v-hover组件，实现方式简洁且贴合组件原生设计：

优化后完整代码 #

<v-row class="fill-height pa-5" align-content="center" justify="center">
  <!-- 用v-for简化重复代码，遍历docs中的所有图片资源 -->
  <v-col 
    v-for="(src, key) in item.docs" 
    :key="key"
    class="text-subtitle-1 text-center"
    cols="12"
    sm="3"
  >
    <v-card class="img-hover-card">
      <v-img :src="src" aspect-ratio=".77">
        <!-- 悬停遮罩与操作按钮插槽 -->
        <template v-slot:overlay>
          <div class="img-overlay">
            <v-btn 
              color="white" 
              variant="flat"
              @click="handleCardAction(key)"
            >
              查看详情 <!-- 可自定义文字或替换为链接逻辑 -->
            </v-btn>
          </div>
        </template>
      </v-img>
    </v-card>
  </v-col>
</v-row>

<style scoped>
/* 悬停时触发遮罩显示与变暗效果 */
.img-hover-card:hover .img-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 暗度可通过透明度调整 */
  opacity: 1;
}

/* 遮罩默认隐藏，添加过渡动画 */
.img-overlay {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

关键实现细节 #

• overlay插槽：v-img原生提供的叠加层插槽，自动适配图片尺寸，无需手动设置宽高，避免布局错位。
• CSS hover控制：通过父容器的hover状态触发遮罩的透明度变化，实现图片变暗效果，性能优于JS控制的hover组件。
• 按钮居中：利用flex布局让按钮在遮罩层内自动居中，无需额外定位代码。
• 代码简化：用v-for遍历item.docs替代重复的4个v-col，降低维护成本。

扩展调整 #

• 若需添加跳转链接，可将v-btn包裹在v-router-link（Vue路由场景）或原生<a>标签中。
• 暗度、过渡速度可通过修改background-color的透明度和transition参数自定义。
• 点击按钮的逻辑可在handleCardAction方法中实现，比如弹窗预览、跳转详情页等。

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