2022/5/5 实现同一父组件的子组件的页面转换（步骤实现）

一、在父组件实现：步骤条、子组件、按钮
1、通过switch case实现在每个特定面板调用子组件
2、v-show和v-if都能控制元素在页面是否显示，在用法上也相同；
3、步骤条：设置active属性，接受一个Number，表明步骤的 index，从 0 开始。
4、ref 绑定子组件，调用子组件的方法
5、实现同一个按钮的不同显示及操作时用v-if和下标控制

 <el-button
              class=""
              type="primary"
              @click="prevSteps"
              v-if="stepsIndex != 1"
          >
            上一步
 </el-button>

6、通过控制加减下标控制每页的转换

<Model v-show="isShow" /> <Model v-if="isShow" />
当表达式为true的时候，都会占据页面的位置
当表达式都为false时，都不会占据页面位置
v-show实现每个子组件来回切换时数据保持不变，v-if不能在这儿用，v-if会重构，数据会清空。

<template>
  <div>
    <!--    步骤条-->
    <el-steps :active="stepsIndex" align-center>
      <el-step title="acl number配置"/>
      <el-step title="acl 规则配置"/>
      <el-step title="流分类配置"/>
    </el-steps>
    
    <div class="main">
      <!-- 子组件 -->
      <acl-number v-show="stepsIndex == 1" ref="aclnumber"></acl-number>
      <acl-rules v-show="stepsIndex == 2" ref="aclrules"></acl-rules>
      <traffic-classifier v-show="stepsIndex == 3" ref="classifier"></traffic-classifier>
    
      <!-- 按钮 -->
      <el-row>
        <el-col :span="5" :offset="6" >
          <el-button
              class="btn"
              type="primary"
              @click="reset"
              v-if="stepsIndex == 1"
          >
            重置
          </el-button>
          <el-button
              class=""
              type="primary"
              @click="prevSteps"
              v-if="stepsIndex != 1"
          >
            上一步
          </el-button>
        </el-col >
        <el-col :span="5"  >
          <el-button class="btn" type="primary" @click="sub">
            提交
          </el-button>
        </el-col >
        <el-col :span="5" >
          <el-button
              class="btn"
              type="primary"
              @click="nextSteps"
              v-if="stepsIndex != 7"
          >
            下一步
          </el-button>
          <el-button
              class="btn"
              type="primary"
              @click="search"
              v-if="stepsIndex == 7"
          >
            跳转查看
          </el-button>
        </el-col >
      </el-row>
    </div>
  </div>
</template>
<script>
// import validator from "@/utils/validator";
import {safelyGetNodeInfo} from '../apis'
import AclNumber from '@/components/TaskDispatch/Guide/Configuration/AclNumber'
import TrafficClassifier from '@/components/TaskDispatch/Guide/Configuration/TrafficClassifier'
import AclRules from '../components/TaskDispatch/Guide/Configuration/AclRules.vue'
import TrafficBehavior from '../components/TaskDispatch/Guide/Configuration/TrafficBehavior.vue'
import TrafficPolicy from '../components/TaskDispatch/Guide/Configuration/TrafficPolicy.vue'
import RoutePolicy from '../components/TaskDispatch/Guide/Configuration/RoutePolicy.vue'
import VpnInstance from '../components/TaskDispatch/Guide/Configuration/VpnInstance.vue'

export default {
  stepsIndex: 2,
  components: {AclNumber, TrafficClassifier, AclRules, TrafficBehavior, TrafficPolicy, RoutePolicy, VpnInstance},
  data() {
    return {
      stepsIndex: 1,
      chartBackgroundColor: 'rgba(0,0,0,0.7)',
    }
  },

  mounted() {
    this.getNodeInfo()
  },
  methods: {
  //点击下一页时
    nextSteps() {
      this.stepsIndex++
    },
    //点击上一步时
    prevSteps() {
      this.stepsIndex--
    },
    // 获取节点信息，供配置时选择
    async getNodeInfo() {
      this.$store.commit('setNodeInfo', await safelyGetNodeInfo())
    },
    //调用子组件的重置方法
    reset() {
      this.$refs.aclnumber.reset()
    },
    //调用子组件的跳转方法
    search() {
      this.$refs.vpn.searchs()
    },
    // 调用各子组件的提交
    sub() {
      switch (this.stepsIndex) {
        case 1:
          this.$refs.aclnumber.submit()
          // this.nextSteps()
          break
        case 2:
          this.$refs.aclrules.submit()
          // this.nextSteps()
          break
        case 3:
          this.$refs.classifier.submit()
          // this.nextSteps()
          break
        case 4:
          this.$refs.behavior.submit()
          // this.nextSteps()
          break
        case 5:
          this.$refs.policy.submit()
          // this.nextSteps()
          break
        case 6:
          this.$refs.route.submit()
          // this.nextSteps()
          break
        case 7:
          this.$refs.vpn.submit()
          break

        default:
          break
      }
    },
  },
}
</script>

<style scoped>
.main {
  /* width: 80%; */
  /* margin-left: 200px; */
  /* margin: 100px auto 0 auto; */
}

.btn {
  width: 150px;
}

.remove-button {
  position: absolute;
  right: 180px;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}

.add-button {
  position: absolute;
  right: 180px;
  top: 130px;
  font-size: 28px;
  line-height: 40px;
  cursor: pointer;
}

/deep/ .dv-border-box-13 {
  padding-bottom: 90px;
  box-sizing: border-box;
  -moz-box-sizing: border-box; /* Firefox */
  -webkit-box-sizing: border-box; /* Safari */
}

/deep/ .el-input__inner,
/deep/ .el-table,
/deep/ .el-table tr,
/deep/ .el-table th,
/deep/ .el-pager li,
/deep/ .el-pagination button,
/deep/ .el-dialog,
/deep/ .el-dialog__body {
  background-color: transparent !important;
}
</style>