Vue组件 el-steps 实现页面内导航

一、前言

在前端开发过程中，当页面内容分为若干栏目后，通过增加导航栏位定位至相应栏目不失为一种良好的用户体验。

应用el-steps可实现页面内栏目跳转。el-steps基本用法如下：

下一步

data:{ active:0 }, methods:{ next(){ if(this.active++ >2){ this.active = 0 } } }

二、属性介绍

下面重点介绍el-steps的direction、space、active、process-status、align-center属性，如下:

通过查看Element手册，需要定宽的步骤条时，设置space属性即可，单位为px，如果不设置为自适应（若不确定步骤条中每一步骤中内容高度或宽度，可设置为自适应；为使界面美观，可修改el-step属性：

.el-step__main { width: 100%!important; padding-left: 3%!important; margin-bottom: 3%!important; }

）

el-step属性如下图所示：

这里重点介绍下如何应用el-steps动态展示所需信息。

三、Demo

以上只是实现了步骤条内容的动态展示，若需实现根据用户浏览内容定位导航栏目或者根据导航栏目快速定位至相关栏目处，需通过动态监听页面内容实现。

四、拓展阅读

开发者手册

Vue

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。