Vue3 + Vant3构建类掘金App：JTags组件封装

2024-02-13 06:38:36

前言

继上一篇博文《【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - JList组件封装》中封装了通用的列表组件JList后，我们继续完善子标签组件的功能。今天，我们着重介绍JTags组件的封装，用于实现“关注”等标签页中的“发现更多作者”模块。

JTags组件封装

JTags组件旨在提供一种可复用的方式来显示作者列表。它接受一个作者数组作为prop，并使用Vant的Card组件来渲染每个作者的信息。

首先，在components文件夹中创建JTags.vue文件：

<template>
  <div class="j-tags">
    <van-card v-for="author in authors" :key="author.id">
      <div class="avatar">
        <van-image :src="author.avatar" fit="cover" />
      </div>
      <div class="info">
        <div class="name">{{ author.name }}</div>
        <div class="description">{{ author.description }}</div>
      </div>
    </van-card>
  </div>
</template>

<script>
export default {
  props: ['authors'],
};
</script>

<style lang="scss">
.j-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 20px 0;

  .van-card {
    width: 120px;
    .avatar {
      width: 120px;
      height: 120px;
    }

    .info {
      padding: 10px;
      .name {
        font-weight: bold;
      }
    }
  }
}
</style>

然后，在需要使用JTags组件的页面中导入并使用它：

<template>
  <j-tags :authors="authors" />
</template>

<script>
import JTags from '@/components/JTags.vue';

export default {
  components: { JTags },
  data() {
    return {
      authors: [
        { id: 1, name: '作者1', avatar: '...', description: '...' },
        // ...
      ],
    };
  },
};
</script>