数值组件滚动&趋势图联动需求拆解

技术栈：使用vue3的composition API + tsx 进行开发

一、需求描述

直接看UI图吧。

简单描述一下：

数值卡片：

上方部分是一个数值卡片列表，每个卡片维护不同的集中状态，选中态，hover态。

细节：选中态的时候，数值卡片下方会有一个白箭头。

需要注意的是，其中第三个卡片中有两个指标，可以点击指标名称切换当前选中指标。

滚动：当宽度不够的时候，出现左右滚动按钮。当宽度够的时候，无左右滚动按钮。

趋势图：上方切换选中数值卡片，显示当前指标的近1月趋势图。

二、需求分析

简单来说，这个模块的开发可以分为两个模块。

模块1，数值组件的开发。

模块2，趋势图组件的开发。

2.1 数值组件

这里我将其拆分为三个部分，

1、首先进行黄色边框，模块一的开发。

考虑到如果是每个数值卡片单独进行数据请求，多数值卡片请求并发会降低请求速度，所以，数值卡片不维护请求状态，只渲染数据。

组件的独立性，可以包括以下几个方面：维护自身的数据和状态、作用域，维护自身的事件。

我们在保持组件独立性的时候，当然还需要考虑它与外界的交互，主要包括：

对外提供配置项，来控制展示以及具体功能。

对外提供查询接口，可从外界获取组件状态。

引用自：一个组件的自我修养 | 被删的前端游乐场

对外提供两个配置项：

① 传入的数据格式，根据业务进行定制，其格式为：

export interface NumberData {
  /** 指标 key 值 */
  key: string
  /** 指标 value 值 */
  value: number
  /** 环比*/
  chainRatio: number | string
  /** 同比 */
  yearDayRatio: number | string
  /** 指标单位 */
  unit: string
  /** 指标格式化 */
  format: string
}

传入的 NumberData 是一个数组。

② 另外一个prop是，当前数值卡片列表选中的指标。

这个prop是双向绑定的，因为数值卡片内部维护点击事件，当点击当前卡片时，选中指标会变化。

这里，卡片的具体渲染逻辑比较简单。无非是调整一些css的样式，hover态样式变化，点击后样式变化。

这里需要着重记录的是，选中状态箭头的开发。这里的箭头利用的是伪元素。

主要是参考了下面这篇文章的实现方式：

https://www.cnblogs.com/qianxiaox/p/13808935.html

2、模块2，整体数值卡片列表的开发

这个列表开发中主要维护两件事情，

① 请求数据，格式化数据

② 初始化当前选中数值卡片指标。

3、模块3 滚动的开发