Vue3从0到1组件开发-布局组件：Card卡片

2023-09-05 01:32:12

使用Vue3构建可复用、响应式的Card卡片组件

在Vue3中，组件开发对于构建复杂、可重用的应用程序至关重要。布局组件是组件开发中不可或缺的一部分，它们使我们能够创建美观、响应式的应用程序界面。Card卡片组件是一种常见的布局组件，用于显示各种信息，例如文章、图像和视频。

创建Card卡片组件

开发Card卡片组件包括以下步骤：

创建组件模板： 在HTML文件中创建组件模板，其中包含卡片的结构和内容。

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

创建组件脚本： 在JavaScript文件中创建组件脚本，其中包含组件的逻辑和行为。

export default {
  name: 'Card',
  props: {
    header: String,
    footer: String
  }
};

使用插槽： 通过在模板中使用<slot>元素，允许用户在Card组件中嵌入自定义内容。

<card>
  <template v-slot:header>
    <h1>标题</h1>
  </template>
  <template v-slot:footer>
    <p>页脚</p>
  </template>
</card>

响应式布局

为了确保Card卡片组件在不同设备上都能正常显示，我们需要对其进行响应式布局。我们可以使用CSS媒体查询在组件的样式表中指定断点，以在不同的屏幕宽度下调整卡片的尺寸和布局。

@media (max-width: 576px) {
  .card {
    max-width: 100%;
  }
}

@media (min-width: 576px) {
  .card {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .card {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .card {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .card {
    max-width: 1140px;
  }
}

属性和事件

Card卡片组件可以具有各种属性和事件，以满足不同的需求。我们可以使用props选项在组件脚本中声明属性，并在组件模板中使用它们。同样，我们可以使用emits选项声明事件，并在组件模板中使用@符号触发它们。

<card @click="handleClick">
  <template v-slot:header>
    <h1>标题</h1>
  </template>
  <template v-slot:footer>
    <p>页脚</p>
  </template>
</card>

export default {
  name: 'Card',
  props: {
    header: String,
    footer: String
  },
  emits: ['click'],
  methods: {
    handleClick() {
      // 用户点击卡片时触发的操作
    }
  }
};