当前位置：首页 > VUE

vue实现卡片效果

2026-01-19 12:15:47VUE

Vue实现卡片效果的方法

使用Vue实现卡片效果可以通过多种方式完成，包括使用原生CSS、UI框架或自定义组件。以下是几种常见方法：

使用原生CSS和Vue组件

创建一个简单的卡片组件，结合CSS实现样式效果。

<template>
  <div class="card">
    <div class="card-header">
      <slot name="header"></slot>
    </div>
    <div class="card-body">
      <slot></slot>
    </div>
    <div class="card-footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card'
}
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin: 10px;
}

.card-header {
  padding: 15px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
}

.card-body {
  padding: 15px;
}

.card-footer {
  padding: 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
}
</style>

使用UI框架（如Element UI）

许多UI框架提供了现成的卡片组件，例如Element UI的el-card。

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>卡片标题</span>
    </div>
    <div v-for="item in items" :key="item" class="text item">
      {{ item }}
    </div>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      items: ['内容1', '内容2', '内容3']
    }
  }
}
</script>

<style>
.box-card {
  width: 480px;
}
</style>

使用Vuetify的卡片组件

Vuetify提供了丰富的卡片样式和功能。

<template>
  <v-card class="mx-auto" max-width="400">
    <v-img
      class="white--text align-end"
      height="200px"
      src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
    >
      <v-card-title>卡片标题</v-card-title>
    </v-img>

    <v-card-subtitle class="pb-0">副标题</v-card-subtitle>

    <v-card-text class="text--primary">
      <div>卡片内容区域</div>
    </v-card-text>

    <v-card-actions>
      <v-btn color="primary" text>操作按钮</v-btn>
    </v-card-actions>
  </v-card>
</template>

动态卡片列表渲染

结合Vue的v-for指令实现动态卡片列表。

<template>
  <div class="card-list">
    <div v-for="(card, index) in cards" :key="index" class="card">
      <h3>{{ card.title }}</h3>
      <p>{{ card.content }}</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' }
      ]
    }
  }
}
</script>

<style>
.card-list {
  display: flex;
  flex-wrap: wrap;
}

.card {
  width: 200px;
  margin: 10px;
  padding: 15px;
  border: 1px solid #eee;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
</style>

卡片悬停效果

通过CSS添加悬停动画增强交互体验。

.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

这些方法可以根据项目需求选择使用，从简单的自定义组件到功能丰富的UI框架方案都能实现良好的卡片效果。

vue实现卡片效果