【项目实战】基于Vue3+Vant3造一个网页版的类掘金app项目 - 子标签JTags组件封装

西瓜watermelon
776 阅读4分钟

「这是我参与2022首次更文挑战的第21天，活动详情查看：2022首次更文挑战」

前言

大家好，昨天的分享中我们封装来一个通用的列表JList组件，从而实现了首页中几乎所有标签页中的列表功能，但是每个标签页中除了列表外还有其它内容，比如关注标签页中还有一个“发现更多作者”的小模块，而其它标签页中进去后还会再细分为小的标签，比如前端下又分为JavaScript、Vue；后端又分为Java、Python等等，并且这些模块结构在每个大标签中都是一样的，唯一不同的就是对应的子标签类型。这样一来我们又可以封装一个JTags组件来实现代码复用了。本次分享实现如下功能：

  • 关注标签页中推荐作者模块展示
  • 其它标签页中子标签JTags组件封装

官方效果图如下： image.png

推荐作者模块

当进入关注标签页面后，列表数据展示的是你关注的作者的文章，而在列表的最顶部则是官方推荐的还未关注过的掘金作者，列表功能在前面的封装中我们已经实现了，今天再添加一个推荐作者模块。这个模块实现起来也是比较简单的，其实就是一个navbar导航组件或者自己用div封装，左侧是固定文本“发现更多优秀作者”，右边则是四个静态头像加一个图标，点击后跳转到一个新页面。为了让效果更逼真一些，我们这里功能实现与官方稍稍不同，在这里我们会去调用官方的recommend接口来获取真实的推荐的作者数据，然后过滤出4~5个未关注的作者，并把他们的头像显示在这里，最后再实现点击后跳转到新页面加载更多的作者数据。实现思路如下：

  • 添加一个van-nav-bar组件，并通过left和right插槽自定义左右两侧内容
  • left插槽中直接放一个固定加粗文本“发现更多优秀作者”
  • right插槽中添加一个div元素并通过v-for指令循环响应式属性authorList，循环输出推荐作者头像，同时为了设置头像间有个叠加效果，可以设置div元素的margin-right属性为-5像素
  • 最后再在right插槽的最后天添加一个van-icon组件，name属性值为arrow（向右的箭头）
  • 在setup中定义响应式属性authorList，请求后端API recommend，并根据返回数据的is_follow属性过滤出前4个未被关注的作者数据填充到authorList中 核心代码及效果图：
<van-nav-bar style="margin-bottom: 10px">
    <template #left>
      <div style="font-weight: bold">发现更多优秀作者</div>
    </template>
    <template #right>
      <div
        style="margin-top: 5px; margin-right: -5px"
        v-for="item in authorList"
        :key="item.user_id"
      >
        <van-image
          round
          width="30px"
          height="30px"
          :src="item.avatar_large"
        />
      </div>
      <van-icon
        name="arrow"
        color="#262626"
        style="margin-left: 15px; font-weight: bold"
      />
    </template>
 </van-nav-bar>

api.recommend(5).then((res) => {
   state.authorList = res.data.filter((item) => item.isfollowed === false);
});

test2.gif

子标签JTags组件封装

除了关注标签页内容与其它标签页略有不同外，其它几个标签内容及结构都是相似的，都是由顶部的子标签模块和下面的列表模块组成。关于列表组件我们已经在前面进行来封装实现来不同标签页之间的共用，接下来我们再对子标签列表进行封装，同样实现标签页之间的代码共用。

子标签组件的封装跟列表组件思路是一样的：

  • 首先新建一个名为JTags.vue文件，并在该文件中添加ul和li元素用于展示标签内容
  • 同样为了达到通用的目的，不同的标签需要通过传递不同的url去后端请求数据，因此需要定义一个url必填属性
  • 另外，这些子标签数据都是根据主标签动态加载的，在请求后台接口时需要传递一个cate_id参数过去，所以还需再定义一个cateId必填属性
  • 在setup中定义响应式属性tagList，并请求后台接口将发挥结果赋值给tagList
  • 最后通过v-for指令循环输出子标签内容 核心代码及效果
  • JTags.vue
<ul class="tag-list">
    <li class="tag-item" v-for="tag in tagList" :key="tag.tag_id">
      {{ tag.tag_name }}
    </li>
</ul>

props: {
    url: {
      type: String,
      required: true,
    },
    cateId: {
      type: String,
      required: true,
    },
  },
  setup(props, ctx) {
    let tagList = ref([]);
    const { url, cateId } = props;
    http
      .post(url, {
        cateId: cateId,
      })
      .then((res) => {
        tagList.value = res.data;
      });
    return {
      tagList,
    };
  },
  • 在Home.vue中调用
<j-tags
    url="/juejin/recommend_tag_list"
    :cateId="item.category_id"
  ></j-tags>
  <j-list
    url="/juejin/recommend_cate_feed"
    :cateId="item.category_id"
    :limit="20"
    :sort_type="200"
  />

test2.gif

总结

本次分享中我们实现了，关注列表中推荐作者的头像展示，封装了JTags子标签组件，实现了代码的复用以及子标签的动态加载。下次内容中将实现点击关注列表中的推荐作者跳转到推荐作者列表页面，点击某个子标签自动根据子标签过滤列表内容。本次分享就到这里了，欢迎点赞加关注哦！

avatar
文章
阅读
粉丝