vuejs 组件_简单美观的卡片组件，带有优雅的VueJS火花线

以下是一个简单美观的卡片组件，带有优雅的VueJS火花线，供参考：

<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>

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
  margin: 10px;
  padding: 10px;
}

.card-header {
  background-color: #f5f5f5;
  border-bottom: 1px solid #ccc;
  font-size: 18px;
  font-weight: bold;
  padding: 10px;
}

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

使用方法：

<template>
  <div>
    <card>
      <template v-slot:header>
        Card Header
      </template>
      Card Body
      <template v-slot:footer>
        Card Footer
      </template>
    </card>
  </div>
</template>

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

export default {
  components: {
    Card
  }
}
</script>

结果如下图所示：