vue 实现可以转弯的步骤条

会拐弯的步骤条效果如下

代码部分

这边我是自己封装了一个step.vue的组件,因为需要响应式，我这边需要兼容4:3和16:9的页面(vh,vw这些是封装了样式计算宽高完成响应式布局)，所以加了一些宽度的判断

 1. 创建步骤条组件Steps.vue

 2. 在使用的页面引入Steps组件，并传入相关数据

import Steps from '@/components/Steps/index';


components: {
    Steps
},

stepInfo: {
        list: [
          {
            status: '1',
            title: '步骤条1',
            description: '2021年7月7日'
          },
          {
            status: '2',
            title: '步骤条2',
            description: '2021年11月19日'
          },
          {
            status: '3',
            title: '步骤条3',
            description: '2021年12月31日'
          },
          {
            status: '4',
            title: '步骤条4',
            description: '2022年4月19日'
          },
          {
            status: '5',
            title: '步骤条5',
            description: '2022年5月1日'
          },
          {
            status: '6',
            title: '步骤条6',
            description: '2022年5月1日'
          },
          {
            status: '7',
            title: '步骤条7',
            description: '2022年7月1日'
          },
          {
            status: '8',
            title: '步骤条18',
            description: '2022年8月1日'
          },
          {
            status: '9',
            title: '步骤条19',
            description: '未完成'
          },
          {
            status: '1',
            title: '步骤条10',
            description: '2021年7月7日'
          },
          {
            status: '2',
            title: '步骤条11',
            description: '2021年11月19日'
          },
          {
            status: '3',
            title: '步骤条12',
            description: '2021年12月31日'
          },
          {
            status: '4',
            title: '步骤条13',
            description: '2022年4月19日'
          },
          {
            status: '5',
            title: '步骤条14',
            description: '2022年5月1日'
          },
          {
            status: '6',
            title: '步骤条15',
            description: '2022年5月1日'
          },
          {
            status: '7',
            title: '步骤条16',
            description: '2022年7月1日'
          },
          {
            status: '8',
            title: '步骤条17',
            description: '2022年8月1日'
          },
          {
            status: '9',
            title: '步骤条18',
            description: '未完成'
          }
        ],
        step: 14
      }

• 注意：
    下边style中的.stepOutSmall这个类名及其下边的可以全部删掉
    页面上样式可以将vw(16*2) 、vh(16*2)这种的改为16px;
    如果觉得改vw vh很麻烦可以使用下列函数放入你的文件中
  
  

  @function vw($px) {
    // 进行计算操作
    $result: ($px / 2);
    $factor: 100000;
    $roundedValue: round($result * $factor);
    $roundedResult: $roundedValue / $factor;
  
    @return #{$result}px;
  
  }
  @function vh($px) {
    $result: ($px / 2);
    $factor: 100000;
    $roundedValue: round($result * $factor);
    $roundedResult: $roundedValue / $factor;
    @return #{$result}px;
  }