目标 　　需要实现如下的效果 要求 要求内容能够自适应，比如添加步骤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 ...