因樣式問題並沒有使用element tabs組件
<template>
<!-- 導航切換 -->
<div class="nav_change">
<div
class="item"
:class="current == 0 ? 'active' : ''"
@click="changeTab(0)"
>
崗位信息
</div>
<div
class="item"
:class="current == 1 ? 'active' : ''"
@click="changeTab(1)"
>
收到的簡歷
</div>
<div
class="item"
:class="current == 2 ? 'active' : ''"
@click="changeTab(2)"
>
面試邀請
</div>
<div
class="item"
:class="current == 3 ? 'active' : ''"
@click="changeTab(3)"
>
投標企業
</div>
<!-- <div
class="item"
:class="current == 4 ? 'active' : ''"
@click="changeTab(4)"
>
評價
</div> -->
</div>
<!-- 崗位詳情 -->
<PostInfo v-if="postShow"></PostInfo>
<!-- 收到的簡歷 -->
<ReceiveResume v-if="receiveShow"></ReceiveResume>
<!-- 面試邀請 -->
<Interview v-if="interviewShow"></Interview>
<!-- 投標企業 -->
<TenderEnterprise v-if="tenderShow"></TenderEnterprise>
</template>
<script>
import PostInfo from "./postInfo";
import ReceiveResume from "./receiveResume";
import Interview from "./interview";
import TenderEnterprise from "./tenderEnterprise";
export default {
name: "rdetail",
components: {
PostInfo,
ReceiveResume,
Interview,
TenderEnterprise
},
data() {
return {
current: 0,
postShow: true, //崗位詳情
receiveShow: false, //接收到的簡歷
interviewShow: false, //面試邀請
tenderShow: false //投標企業
// evaluationShow: false //評價
};
},
//路由守衛 判斷如果是從其他頁面跳轉的就把current等於0來定位到導航欄的第一個
beforeRouteEnter(to, from, next) {
console.log("to", to);
console.log("from", from);
if (from.path == "/recruitment/list") {
localStorage.setItem("enterpriseNum", 0);
next();
} else {
next();
}
},
created() {},
mounted() {
this.current = localStorage.getItem("enterpriseNum");
this.changeTab(this.current)
},
methods: {
//導航欄的切換事件
changeTab(num) {
this.current = num;
//本地存儲
localStorage.setItem("enterpriseNum", num);
if (num == 0) {
this.postShow = true;
this.receiveShow = false;
this.interviewShow = false;
this.tenderShow = false;
// this.evaluationShow = false;
} else if (num == 1) {
this.postShow = false;
this.receiveShow = true;
this.interviewShow = false;
this.tenderShow = false;
// this.evaluationShow = false;
} else if (num == 2) {
this.postShow = false;
this.receiveShow = false;
this.interviewShow = true;
this.tenderShow = false;
// this.evaluationShow = false;
} else {
this.postShow = false;
this.receiveShow = false;
this.interviewShow = false;
this.tenderShow = true;
// this.evaluationShow = false;
}
}
},
};
</script>