SCSS+div封装步骤条组件

最新推荐文章于 2024-03-29 16:04:37 发布

_ACHE_

最新推荐文章于 2024-03-29 16:04:37 发布

阅读量1.6k

点赞数 11

分类专栏：前端文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_44019157/article/details/107529807

版权

本文介绍了在软件系统开发中，面对antd步骤条样式不符设计要求的情况，作者通过SCSS和div元素封装了一个自定义的步骤条组件。文章详细阐述了实现思路，包括组件的结构分解和SCSS样式的编写，特别提到使用状态参数控制【已完成】和【未完成】的显示，并提供了相关代码示例。

摘要由CSDN通过智能技术生成

需求背景

刚入职实习岗位不久，本来投的是Java后端开发的岗位，结果入职分配的岗位是【软件系统开发】，领导说前后端都得会（其实我全都不会），先从前端开始。这次领导给出的需求是一个列表页面和一个详情页面。其中详情页面需要一个横向的步骤条。这个项目原本用的是antd作为前端的组件库，但是目前antd的步骤条的样式不满足设计要求，现在自己动手封装一个。

实现思路

整体结构（草图）
组件分解
1.组件[步骤条]由多个步骤（item）组成，每个步骤（item）有两种状态，分别是【已完成】和【未完成】

未完成的步骤
2.每个步骤可以分解为如下的div结构
在这里插入图片描述

编写SCSS的思路
1. 在定义SCSS样式的时候制定规则：步骤条第一个item的属性width为0便可隐藏首个步骤的连接线。
2. 为每个item提前定义好两种样式【已完成】【未完成】，根据参数来确定显示的状态。

代码

SCSS`

.main {
   
  display: flex;
  margin:0 auto;
  width: 80%;
  &-item:first-child {
   
    & .sincard-detail-main-item-circle_area_line0 {
   
      width: 0px;
    }
  }
  &-item:first-child {
   
    & .sincard-detail-main-item-circle_area_line1 {
   
      width: 0px;
    }
  }
  //******************绘制步骤结点********************
  &-item {
   
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    &-title0{
         /**********绘制气泡主体的圆角矩形***************/
      height:45px;
      width: 60%;
      //font-size: 16px;
      display: