You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

146 lines
3.5 KiB

<template>
<div>
<div class="left-title d-flex align-center justify-center">
{{ list.title }}
</div>
<template v-for="item in list.children">
<div
:key="item.code"
class="left-nav left-child d-flex align-center justify-center"
:class="code === item.code ? 'active' : ''"
@click="changeQuery(item.code, item.url, item)"
>
{{ item.title }}
</div>
<template v-if="item.children && item.children.length && getShow(item.code)">
<div
class="left-nav-child d-flex align-center justify-center"
v-for="child in item.children"
:class="childCode === child.code ? 'active' : ''"
:key="child.code"
@click="changeQuery(child.code, item.url)"
>
{{ child.title }}
</div>
</template>
</template>
</div>
</template>
<script>
export default {
name: 'LeftNav',
props: {
list: {
default: () => {},
type: Object,
},
code: {
default: '',
type: String,
},
},
data() {
return {
childCode: '',
str: '',
};
},
watch: {
'$route.query.code'(val) {
this.childCode = val;
},
},
mounted() {
this.childCode = this.$route.query.code;
},
methods: {
changeQuery(code, url, item) {
let childCode = code;
if (item && item.children && item.children.length) {
childCode = item.children[0].code;
}
if (!url) {
if (this.code && code !== this.code) {
this.$router.push({ query: { code: childCode } });
this.$emit('chanegCode', code);
this.childCode = code;
} else if (code === this.code) {
const path = window.location.href.split('?')
window.location.href= path[0]+`?code=${code}`
}
} else {
if (url === '/') {
window.open(`${window.location.href}`);
} else {
window.open(`${process.env.VUE_APP_BASE_URL + process.env.VUE_APP_PUBLIC_PATH}${url}?code=${childCode}`);
}
}
},
getShow(code) {
if (code === this.code) {
return true;
} else {
for (let i = 0; i < this.list.children.length; i++) {
const item = this.list.children[i];
if (item.children && item.children.length) {
for (let k = 0; k < item.children.length; k++) {
if (this.code === item.children[k].code && code === item.code) {
return true;
}
}
}
}
}
},
},
};
</script>
<style scoped>
.left-title {
background-color: rgb(174, 0, 2);
color: #fff;
font-size: 24px;
font-weight: bold;
width: 240px;
height: 56px;
border-bottom: 1px solid rgba(112, 112, 112, 0.1);
background-image: url('./title-bg.png');
background-size: 100% 100%;
}
.left-nav {
width: 240px;
height: 56px;
/* border-bottom: 1px solid rgba(112, 112, 112, 0.1); */
/* margin-bottom: 1px; */
}
.left-nav-child {
width: 240px;
height: 56px;
padding-left: 20px;
/* border-bottom: 1px solid rgba(112, 112, 112, 0.1); */
/* margin-bottom: 1px; */
background-color: #ededed;
font-size: 16px;
cursor: pointer;
transition: all 0.2s;
}
.left-child {
background-color: #fff;
font-size: 20px;
cursor: pointer;
transition: all 0.2s;
}
.left-nav:hover {
background-color: #b54343;
border-left: 4px solid rgb(174, 0, 2);
color: #fff;
}
.active {
background-color: #b54343;
border-left: 4px solid rgb(174, 0, 2);
color: #fff;
}
</style>