电子商务推广网站,富阳网站建设公司,宣传册样式,广州 网站 建设 制作引导用户按照流程完成任务的分步导航条#xff0c;可根据实际应用场景设定步骤#xff0c;步骤不得少于 2 步。 1.如何使用#xff1f;
设置active属性#xff0c;接受一个Number#xff0c;表明步骤的 index#xff0c;从 0 开始。需要定宽的步骤条时#xff0c;设置s… 引导用户按照流程完成任务的分步导航条可根据实际应用场景设定步骤步骤不得少于 2 步。 1.如何使用
设置active属性接受一个Number表明步骤的 index从 0 开始。需要定宽的步骤条时设置space属性即可它接受Number单位为px如果不设置则为自适应。设置finish-status属性可以改变已经完成的步骤的状态。
el-steps :activeactive finish-statussuccessel-step title步骤 1/el-stepel-step title步骤 2/el-stepel-step title步骤 3/el-step
/el-stepsel-button stylemargin-top: 12px; clicknext下一步/el-buttonscriptexport default {data() {return {active: 0};},methods: {next() {if (this.active 2) this.active 0;}}}
/script
2.含状态步骤条
每一步骤显示出该步骤的状态。
//也可以使用title具名分发可以用slot的方式来取代属性的设置el-steps :space200 :active1 finish-statussuccessel-step title已完成/el-stepel-step title进行中/el-stepel-step title步骤 3/el-step
/el-steps 3.有描述的步骤条
每个步骤有其对应的步骤状态描述。
el-steps :active1el-step title步骤 1 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤 2 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤 3 description这段就没那么长了/el-step
/el-steps
4.居中的步骤条
标题和描述都将居中。
el-steps :active2 align-centerel-step title步骤1 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤2 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤3 description这是一段很长很长很长的描述性文字/el-stepel-step title步骤4 description这是一段很长很长很长的描述性文字/el-step
/el-steps 5.带图标的步骤条
步骤条内可以启用各种自定义的图标。
//通过icon属性来设置图标图标的类型可以参考 Icon 组件的文档除此以外还能通过具名slot来使用自定义的图标。el-steps :active1el-step title步骤 1 iconel-icon-edit/el-stepel-step title步骤 2 iconel-icon-upload/el-stepel-step title步骤 3 iconel-icon-picture/el-step
/el-steps
6.竖式步骤条
竖直方向的步骤条。
只需要在el-steps元素中设置direction属性为vertical即可。
div styleheight: 300px;el-steps directionvertical :active1el-step title步骤 1/el-stepel-step title步骤 2/el-stepel-step title步骤 3 description这是一段很长很长很长的描述性文字/el-step/el-steps
/div
7.简洁风格的步骤条 设置 simple 可应用简洁风格该条件下 align-center / description / direction / space 都将失效。 el-steps :active1 simpleel-step title步骤 1 iconel-icon-edit/el-stepel-step title步骤 2 iconel-icon-upload/el-stepel-step title步骤 3 iconel-icon-picture/el-step
/el-stepsel-steps :active1 finish-statussuccess simple stylemargin-top: 20pxel-step title步骤 1 /el-stepel-step title步骤 2 /el-stepel-step title步骤 3 /el-step
/el-steps
