vue实现卡片

Vue 实现卡片组件

在 Vue 中实现卡片组件可以通过自定义组件或使用现成的 UI 库（如 Element UI、Vuetify 等）。以下是两种常见方法：

自定义卡片组件

创建一个简单的卡片组件，包含标题、内容和操作按钮。

<template>
  <div class="card">
    <div class="card-header">
      <h3>{{ title }}</h3>
    </div>
    <div class="card-body">
      <p>{{ content }}</p>
    </div>
    <div class="card-footer">
      <button @click="handleClick">点击</button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '默认标题'
    },
    content: {
      type: String,
      default: '默认内容'
    }
  },
  methods: {
    handleClick() {
      this.$emit('card-click');
    }
  }
};
</script>

<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 16px;
  margin: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.card-header h3 {
  margin: 0;
}
.card-body {
  margin: 10px 0;
}
.card-footer button {
  padding: 5px 10px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 3px;
}
</style>

使用 UI 库（以 Element UI 为例）

Element UI 提供了现成的卡片组件，可以直接使用。

<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>卡片名称</span>
      <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
    </div>
    <div v-for="o in 4" :key="o" class="text item">
      {{ '列表内容 ' + o }}
    </div>
  </el-card>
</template>

<script>
export default {
  name: 'CardDemo'
};
</script>

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

动态渲染卡片列表

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

<template>
  <div>
    <Card 
      v-for="(item, index) in cards" 
      :key="index"
      :title="item.title"
      :content="item.content"
      @card-click="handleCardClick(index)"
    />
  </div>
</template>

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

export default {
  components: { Card },
  data() {
    return {
      cards: [
        { title: '卡片1', content: '内容1' },
        { title: '卡片2', content: '内容2' }
      ]
    };
  },
  methods: {
    handleCardClick(index) {
      console.log(`点击了卡片 ${index}`);
    }
  }
};
</script>

卡片动画效果

通过 Vue 的过渡（Transition）实现卡片动画。

<template>
  <transition name="fade">
    <div class="card" v-if="show">
      <h3>动画卡片</h3>
      <p>内容</p>
    </div>
  </transition>
</template>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

通过以上方法，可以灵活实现 Vue 中的卡片组件，并根据需求扩展功能。