uniapp 手写 Steps 步骤条

效果图：

image.png

然后添加一步后：

image.png

css

.tl-steps{
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .tl-dot{
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
    }
    .tl-line{
        width: 250rpx;
        border: 1px solid #CCCCCC;
    }
    .tl-line-green{
        width: 250rpx;
        border: 1px solid #4DB046;
    }
    .tl-green{
        background: #4DB046 !important;
    }
    .tl-gray{
        background: #DCDCDC;;
    }

html

<view class="tl-steps">
            <view class="tl-dot tl-green"></view>
            <view class="tl-line" :class="lineShow ? 'tl-line-green' : ''"></view>
            <view class="tl-dot tl-gray" :class="lineShow ? 'tl-green' : ''"></view>
            <view class="tl-line" :class="show3 ? 'tl-line-green' : ''"></view>
            <view class="tl-dot tl-gray" :class="show3 ? 'tl-green' : ''"></view>
        </view>

js

data(){
  return(
    show1: true,//第1步
                show2: false,//第2步
                lineShow: false,
                show3: false,//第3步
)
}

隐私、权限声明

1. 本插件需要申请的系统权限列表：
   无
2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：
   无
3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：
   无

隐私、权限声明

1. 本插件需要申请的系统权限列表：
   无
2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：
   无
3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：
   无

隐私、权限声明

1. 本插件需要申请的系统权限列表：
   无
2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：
   无
3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：
   无

隐私、权限声明

1. 本插件需要申请的系统权限列表：
   无
2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：
   无
3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：
   无