<template>
<div class="wrapper">
<navigate :menuList="menuList" :tabIndexList="tabIndexList" :tabIndex="tabIndex" @tabIndexListNav="tabIndexListNav"></navigate>
<registerBasicInfo v-if="tabIndex.third==0 && tabIndex.second == 0"></registerBasicInfo>
<registerInfo v-if="tabIndex.third==0 && tabIndex.second == 1"></registerInfo>
<registerHistory v-if="tabIndex.third==0 && tabIndex.second == 2"></registerHistory>
</div>
</template>
<script>
import RegisterBasicInfo from ‘../components/registerBasicInfo‘
import RegisterInfo from ‘../components/registerInfo‘
import RegisterHistory from ‘../components/registerHistory‘
import Navigate from ‘../components/navigate/navigate‘
export default {
name: ‘instance‘,
data () {
return {
menuList: [
{
‘name‘: ‘基本信息‘,
‘iconName‘: ‘icon-registerBasicInfo‘
},
{
‘name‘: ‘注册信息‘,
‘iconName‘: ‘icon-registerInfo‘
}, {
‘name‘: ‘历史信息‘,
‘iconName‘: ‘icon-registerHistory‘
}
],
tabIndexList: [{clickIndex: 0, secIndex: 0}],
tabIndex: {second: 0, third: 0}
}
},
methods: {
tabIndexListNav: function (data) {
this.tabIndexList = data
}
},
props: [‘indexNeed‘],
components: {
registerBasicInfo: RegisterBasicInfo,
registerInfo: RegisterInfo,
registerHistory: RegisterHistory,
navigate: Navigate
},
watch: {
$route: {
handler: function (val, oldVal) {
let _this = this;
let flag = false;
if (!this.$route.query.third) {
this.$route.query.third = 0;
this.$route.query.second = 0;
}
this.tabIndex = this.$route.query;
for (let elem of this.tabIndexList) {
if (elem.clickIndex==_this.indexNeed.clickIndex && elem.secIndex==_this.indexNeed.secIndex) {
flag = true
}
}
if (!flag) {
this.tabIndexList.push(this.indexNeed);
this.showIframe = false
}
this.showCloseAll = true;
//created事件触发的函数可以在这里写...
//都是componentA组件，声明周期还在，改变不了
},
deep: true
}
}
}
</script>
<style>
.turnUp i, .turnDown i {
display: inline-block;
width: 16px;
height: 16px;
background-size: cover;
vertical-align: middle;
margin-right: 5px;
}
.turnUp i {
background-image: url("../assets/images/on-green.png");
}
.turnDown i {
background-image: url("../assets/images/off-grey.png");
}
.turnUp span, .turnDown span {
vertical-align: middle;
}
</style>
原文地址：https://www.cnblogs.com/mx2036/p/9415734.html