在做后台管理时有一个需求：需要在步骤条上即时编辑内容，并查看效果，我们的后台用到的技术栈是vue+element-ui,
elementUI的官方给的是有步骤条这个组件的，如下：

看到示例及参数配置后，，果然远远满足不了需求，只能自己动手组装一个了，还好，vue给我们的组件机制可以很快很便捷的开发出我们想要的东西，于是我在element-ui中东拼西凑了一下，首先说一下我用到的组件，即时可编辑，那肯定是少不了输入框了，但输入框又不能一直是输入框，因为编辑完成要有一个显示状态，在找了一会儿后我发现了一个很符合我需求的组件，那就是Tag组件，因为这里面已经给了一种交互，如下：

在点击最后一个tag时它会展示出输入框以供编辑，在敲回车或失去焦点后会恢复标签状态，这样我们的即时编辑的问题就解决了，然后就是步骤条的问题了，在看了element-ui的步骤条后我放弃了改源码的念头，本身这个组件不是很复杂，随意改源码会给项目部署带来一定的麻烦，且官方组件并不适合我的自定义标准，不如自己DIY一个，也不是很难，主要是在动态改变步骤条内容时要实时监听内容的高度以适应步骤条的高度，如图是我的自定义步骤条（样式没有做什么优化，写出来以后就赶着来分享了，见谅见谅，[手动滑稽]）

编写过程中没有太大的麻烦，稍微复杂点的就是监听步骤条高度了，这个大家可以在我的源码里去看，既然是即时效果，也意味着所有的展示项都可以编辑，于是我仿照tag的交互方式写了标题和时间的即时编辑，效果如下：


写的比较急可能更贴合我们的业务需求，写的不是很好，大家有什么疑问或者指教的都可以留言给我，共同进步哦！
git地址：https://github.com/MrXiaoMings/steps
查看效果