uniapp 手寫 Steps 步驟條

效果圖：

然後添加一步後：

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. 本插件是否包含廣告，如包含需詳細說明廣告表達方式、展示頻率：
   無