原生步骤条书写

步骤条预览

第一步:

第二步:

第三步:

代码展示

html

html 复制代码
  <div class="contract">

    <div class="step-box">
      <div class="step-part" v-for="(step,index) in stepArray" :key="index">
        <div class="step-txt">
          <span :class="active >= step.id ? 'step-id-active' : 'step-id'" >
          <!--    van-icon 是框架vant,如果你的项目未使用vant框架,可以换成一个本地的小图标  
         		   判断条件不要忘记 v-if="active > step.id"     
          -->
            <van-icon v-if="active > step.id" name="checked" color="#1989fa" size="20" style="background: #FFFFFF;"/>
            <span v-else>{{step.id + 1}}</span>
          </span>
          <span :class="active > step.id ? 'step-line-active' : 'step-line'" v-show="step.id !== 2"></span>
        </div>
        <span class="step-name">{{step.name}}</span>
        <span class="step-detail">{{step.detail}}</span>
      </div>
    </div>

    <br>
    <br>
    <br>
    <button @click="active = 0 ">0</button>
    <button @click="active = 1 ">1</button>
    <button @click="active = 2 ">2</button>

  </div>

js

基于vue

js 复制代码
import {reactive, ref} from "vue";

const active = ref(0);
const stepArray = reactive([
  {
    id:0,
    name:'合同信息',
    detail:'填写合同信息',
  },
  {
    id:1,
    name:'合同模板',
    detail:'填写合同信息',
  },
  {
    id:2,
    name:'合同发起',
    detail:'预览和发起',
  }
])

css

css 复制代码
.contract{
  width: 100%;
  height: 100%;
  overflow: auto;

  .step-box{
    width: 100%;
    height: 120px;
    background: #FFFFFF;
    display: flex;
    justify-content: center;
    text-align: center;

    .step-part{
      width: 30%;
      text-align: center;

      .step-txt{
        padding-top: 10px;
        display: flex;
        position: relative;

        .step-id-active{
          display: block;
          background: #409EFF;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-id{
          display: block;
          background: #DCDEE0;
          width: 20px;
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 50px;
          color: #FFFFFF;
          font-size: 12px;
          margin-left: calc(50% - 10px);
        }

        .step-line-active{
          width: calc(100% - 20px);
          height: 3px;
          background: #409EFF;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }

        .step-line{
          width: calc(100% - 20px);
          height: 3px;
          background: #DCDEE0;
          display: block;
          position: absolute;
          top: 18px;
          left: calc(50% + 11px);
        }
      }


      .step-name{
        display: block;
        color: #323233;
      }

      .step-detail{
        display: block;
        font-size: 12px;
        color: #969799;
      }
    }
  }
}
相关推荐
excel4 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着4 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin8 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js