It is equivalent to a display-hide function that determines whether the current page is an iframe page. If so, display it otherwise hide it.
<template>
<div
id="main-container"
class="main-container"
:class="{ 'head-bar-collapse-width': isCollapse }"
>
<transition name="fade" mode="out-in">
<keep-alive exclude="Customer,Supplier" :include="cacheView">
<router-view :key="$route.path" v-if="status"></router-view>
</keep-alive>
</transition>
<IFrame v-show="this.$route.name.__file"></IFrame>
</div>
</template>
<script>
import IFrame from "../IFrame/IFrame";
export default {
name: "MainContent",
components: {
IFrame,
},
data() {
return {
status: true,
};
},
computed: {
cacheView: function () {
return this.$store.state.tag.tags.map(this.myFunction);
},
},
props: {
isCollapse: {
type: Boolean,
default: false,
},
},
watch: {
$route() {
if (this.$route.name.__file) {
this.status = false;
} else {
this.status = true;
}
// 判断当前路由是否iframe页
},
},
mounted() {
},
methods: {
myFunction(c) {
return c.enName;
// }
},
},
};
</script>
<style lang="scss" scoped>
.main-container {
position: fixed;
top: 85px;
left: 146px;
right: 1px;
bottom: 0px;
padding: 0 20px 0;
color: #676a6c;
background: #f4f4f4;
overflow-y: auto;
// z-index: 10129;
}
.head-bar-collapse-width {
left: 56px;
transition-property: all;
-webkit-transition-property: all; /* Safari */
-webkit-transition-duration: 0.4s; /* Safari */
}
// .fade-leave-active,
// .fade-enter-active {
// transition: all 0.5s;
// }
// .fade-enter {
// opacity: 0;
// transform: translateX(-30px);
// }
</style>