Steps步骤条在Vue中的应用
1、Steps步骤条的作用Steps步骤条引导用户按照流程完成任务的分布导航,可根据实际应用场景设定步骤,但步骤不得少于2步。2、Steps步骤条属性space: 每个 step 的间距,不填写将自适应间距。支持百分比;direction: 显示方向;active:设置当前激活步骤;finish-status:设置结束步骤的状态;simple:是否应用简洁风格;3、Step...
1、Steps步骤条的作用
Steps步骤条引导用户按照流程完成任务的分布导航,可根据实际应用场景设定步骤,但步骤不得少于2步。
2、Steps步骤条属性
space: 每个 step 的间距,不填写将自适应间距。支持百分比;
direction: 显示方向;
active:设置当前激活步骤;
finish-status:设置结束步骤的状态;
simple:是否应用简洁风格;
3、Steps步骤条应用实例
3.1、html文件
<div style="width: 40%; text-align: center; display: block">
<el-steps :active="active" finish-status="success" simple>
<el-step title="用户验证"></el-step>
<el-step title="重置密码"></el-step>
<el-step title="修改成功"></el-step>
</el-steps>
<div v-if="active === 0" align="center">
<p>检查用户账号</p>
</div>
<div v-if="active === 1" align="center">
<p>设置账号密码</p>
</div>
<div v-if="active === 2" align="center">
<p>密码设置成功</p>
</div>
<el-button style="margin-top: 12px" @click="next">下一步</el-button>
</div>
3.2、javascript文件
export default {
data () {
return {
active: 0,
}
},
methods: {
next () {
if (this.active++ > 2) {
this.active = 0
}
}
}
}
更多推荐
所有评论(0)