Vue3从0到1组件开发-业务组件：封装文章列表

这是我参与8月更文挑战的第23天，活动详情查看：8月更文挑战

业务组件的定义

在现有的组件库中其实也可以看到这一分类，不确定背后的原因，但盲猜有些是定制的组件、有些是构思(脑补)的业务组件。

不过别人的思想不重要了，在这里只写一写我在工作中遇到的一些使用到的组件以及调整，以及封装方式。

因为每个人遇到的实际不一样，所以这些并不是封装在组件库中的，只是一些工作的总结。

这篇文章顾名思义，是关于文章列表的二封总结。

使用的组件也尽可能是在之前的文章中出现的，可以在专栏中查看。

文章列表要考虑啥？

因为我练手的项目是Copy的掘金，所以这里直接以掘金的列表来举例，蹭个热度。

先只看文章列表的部分，包含顶部关于当前分类的三种排序方式。

列表中，则是包含广告、带图文章、无图文章三大类。

涉及到的组件分别有card卡片、tag标签、链接、图片，再搭配一点点的样式管理即可。

如果仅仅是这样，只是组件的堆叠，当然不是很值得拿出来说。

那么问题来， 图啥呢？

这时候就需要动动发财的小手，看向隔壁的资讯分类和小册分类。

虽然抽出为业务组件，但既然是组件，本质还是为了公用的嘛。如果只是一个地方用，那就没必要搞成组件了。

这里可以看到，资讯分类和首页的文章列表是非常类似的，区别在于去除了顶部了作者信息栏、重新布局了底部的文章概览。 并且图片从首页的内容高编程了全高。

那么这些细节的地方就是在封装组件的时候需要特别处理的啦。

<template>
<div class="articleList">
    <div class="article-item">
        <div class="article-info">
            <header v-if="showHeader" class="article-item-header">
            // 作者信息栏、标签
            </header>
            <main class="article-item-info">
            // 标题 摘要
            
            <yx-image class="article-item-cover" :src="imgUrl" v-if="showHeader" />
            </main>
            <header class="article-item-footer">
            // 阅、赞等信息
            </header>
        </div>
        <yx-image class="article-item-cover" :src="imgUrl" v-if="!showHeader" />
    </div>
</div>
</template>

贴全部代码容易混淆，所以简化到主题结构代码

这里需要注意的是，图片因为自定义高度会比较麻烦，所以判断当显示头部时封面图高度与摘要等高。

否则与文章等高。