本文主要是介绍vue-el-steps 使用1(上一步、下一步)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
vue代码
<template>
<div class="app-container">
<el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
<el-step title="选择分类"></el-step>
<el-step title="填写信息"></el-step>
<el-step title="完成发布"></el-step>
</el-steps>
<el-form :model="releasForm" :rules="rulesReleas">
</el-form>
<div slot="footer" class="dialog-footer">
<el-button >取 消</el-button>
<el-button style="margin-top: 12px;" @click="upBtn" v-if=" active > 0 && active<=1">上一步</el-button>
<el-button style="margin-top: 12px;" @click="nextBtn" v-if="active < 1 ">下一步</el-button>
<el-button style="margin-top: 12px;" @click="nextBtn" v-if="active == 1 ">保 存</el-button>
</div>
</div>
</template>
<script>
export default {
name: "InfoReleas",
data() {
return {
loadingInfos:false,
infoReleasData:[],
queryForm:{},
// 对话框
dialogTitle:"",
visbleOpen:false,
releasForm:{},
rulesReleas:{},
// 进度条
active: 0,
};
},
created() {
},
methods: {
handleAddInfoReleas(){
this.dialogTitle="新增发布";
this.visbleOpen=true;
},
// 上一步
upBtn(){
if (this.active-- > 2) this.active = 0;
},
// 下一步
nextBtn(){
if (this.active++ > 2) this.active = 0;
console.log(this.active);
},
}
};
</script>
<style scoped>
</style>
<style>
.limited-width {
width: 200px; /* 设置宽度为200像素 */
}
</style>
这篇关于vue-el-steps 使用1(上一步、下一步)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
