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>