目標 　　需要實現如下的效果 要求 要求內容能夠自適應，比如添加步驟5、步驟6, 內容能夠自動等寬，而不是手動修改width； 步驟之間的橫線也要自適應，能夠隨着頁面寬度的拉伸而伸長； 步驟數字能夠自動計算，而不是手動修改添加； 良好的語義化 ...

vue 封裝 step 步驟條組件 ...

<div class="contract-operate_recodeMain"> <ul class="contract ...

話不多說直接上組件代碼。。 調用組件。。。 效果如下： 參考原文：https://blog.csdn.net/xqq580231/article/details/78086173 ...

在這里記錄一個手寫的步驟條，先看效果 重點就是，進度條與步驟div的寬保持一致，比如完成了第一步，就是進度條的width就是22%，完成了第二步，就是44%，當然這個是可以自由調整的 HTML代碼 CSS樣式 參考鏈接：jquery步驟條step插件 ...

步驟條很常見，但是網上很多都不太智能，不適合放在手機上的步驟條，應一位朋友的求幫忙，故寫了一個可以加任意多個步驟，寬度仍然等比，超過屏幕還可以滑動的步驟條ui。具體展示如下： 於若需要請移步我的github，按照自己的需求自行修改。其中橫向滑動可以參加另外一篇文章 ：css如何實現滾動條隱藏 ...

用css寫一個簡單的步驟進度條 html代碼： View Code css代碼： View Code ...

<!-- 未激活顏色： uncolor：'#ccc' 激活 active：0 數據源 data：[{},{}] 步驟條類型:type basic detail num more --> <steps uncolor="#ccc" type="detail ...