vue实现卡片

Vue 实现卡片组件

使用 Vue 实现卡片组件可以通过多种方式，包括使用原生 Vue 或结合 UI 框架（如 Element UI、Vuetify 等）。以下是几种常见的方法：

原生 Vue 实现卡片

通过 Vue 的模板和样式直接实现一个基础卡片组件。

<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: 4px;
  padding: 16px;
  margin: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-header {
  font-weight: bold;
  margin-bottom: 8px;
}
.card-footer {
  margin-top: 8px;
  color: #666;
}
</style>

使用 Element 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.id" class="text item">
      {{ item.content }}
    </div>
  </el-card>
</template>

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

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

使用 Vuetify 实现卡片

Vuetify 也提供了丰富的卡片组件 v-card。

<template>
  <v-card class="mx-auto" max-width="400">
    <v-card-title>卡片标题</v-card-title>
    <v-card-text>
      卡片内容
    </v-card-text>
    <v-card-actions>
      <v-btn color="primary">操作按钮</v-btn>
    </v-card-actions>
  </v-card>
</template>

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

动态卡片列表

通过 v-for 动态渲染多个卡片。

<template>
  <div>
    <card v-for="item in cardList" :key="item.id" :title="item.title">
      {{ item.content }}
    </card>
  </div>
</template>

<script>
import Card from './Card.vue'

export default {
  components: { Card },
  data() {
    return {
      cardList: [
        { id: 1, title: '标题1', content: '内容1' },
        { id: 2, title: '标题2', content: '内容2' }
      ]
    }
  }
}
</script>

卡片交互效果

为卡片添加悬停效果或点击事件。

<template>
  <div 
    class="card" 
    @click="handleClick"
    @mouseover="hover = true"
    @mouseleave="hover = false"
    :class="{ 'hover-effect': hover }"
  >
    <div class="card-body">
      {{ content }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hover: false,
      content: '卡片内容'
    }
  },
  methods: {
    handleClick() {
      alert('卡片被点击了！')
    }
  }
}
</script>

<style scoped>
.card {
  transition: all 0.3s ease;
}
.hover-effect {
  transform: scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>

通过以上方法，可以灵活实现不同风格的卡片组件，满足项目需求。