v1.0.3
This commit is contained in:
maplemei
234
docs/components/side-nav.vue
Executable file
234
docs/components/side-nav.vue
Executable file
@@ -0,0 +1,234 @@
|
||||
<template>
|
||||
<div class="side-nav" @mouseenter="isFade = false" :class="{ 'is-fade': isFade }" :style="navStyle">
|
||||
<ul>
|
||||
<li class="nav-item" v-for="(item, key) in data.filter(a => !a.hidden)" :key="key">
|
||||
<a v-if="!item.path && !item.href" @click="expandMenu">{{item.name}}</a>
|
||||
<a v-if="item.href" :href="item.href" target="_blank">{{item.name}}</a>
|
||||
<router-link v-if="item.path" active-class="active" :to="base + item.path" exact v-text="item.title || item.name"></router-link>
|
||||
<ul class="pure-menu-list sub-nav" v-if="item.children">
|
||||
<li class="nav-item" v-for="(navItem, key) in item.children" :key="key">
|
||||
<router-link class="" active-class="active" :to="base + navItem.path" exact v-text="navItem.title || navItem.name"></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<template v-if="item.groups">
|
||||
<div class="nav-group" v-for="(group, key) in item.groups" :key="key">
|
||||
<div class="nav-group__title" @click="expandMenu">{{group.groupName}}</div>
|
||||
<ul class="pure-menu-list">
|
||||
<li class="nav-item" v-for="(navItem, key) in group.list" v-show="!navItem.disabled" :key="key">
|
||||
<router-link active-class="active" :to="base + navItem.path" exact v-text="navItem.title"></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
<!--<div id="code-sponsor-widget"></div>-->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
data: Array,
|
||||
base: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
highlights: [],
|
||||
navState: [],
|
||||
isSmallScreen: false,
|
||||
isFade: false
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
'$route.path'() {
|
||||
this.handlePathChange();
|
||||
},
|
||||
isFade(val) {
|
||||
this.$emit('navFade', val);
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navStyle() {
|
||||
const style = {};
|
||||
if (this.isSmallScreen) {
|
||||
style.paddingBottom = '60px';
|
||||
}
|
||||
style.opacity = this.isFade ? '0.5' : '1';
|
||||
return style;
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleResize() {
|
||||
this.isSmallScreen = document.documentElement.clientWidth < 768;
|
||||
this.handlePathChange();
|
||||
},
|
||||
handlePathChange() {
|
||||
if (!this.isSmallScreen) {
|
||||
this.expandAllMenu();
|
||||
return;
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.hideAllMenu();
|
||||
let activeAnchor = this.$el.querySelector('a.active');
|
||||
let ul = activeAnchor.parentNode;
|
||||
while (ul.tagName !== 'UL') {
|
||||
ul = ul.parentNode;
|
||||
}
|
||||
ul.style.height = 'auto';
|
||||
});
|
||||
},
|
||||
hideAllMenu() {
|
||||
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
|
||||
ul.style.height = '0';
|
||||
});
|
||||
},
|
||||
expandAllMenu() {
|
||||
[].forEach.call(this.$el.querySelectorAll('.pure-menu-list'), ul => {
|
||||
ul.style.height = 'auto';
|
||||
});
|
||||
},
|
||||
expandMenu(event) {
|
||||
if (!this.isSmallScreen) return;
|
||||
let target = event.currentTarget;
|
||||
if (!target.nextElementSibling || target.nextElementSibling.tagName !== 'UL') return;
|
||||
this.hideAllMenu();
|
||||
event.currentTarget.nextElementSibling.style.height = 'auto';
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$on('fadeNav', () => {
|
||||
this.isFade = true;
|
||||
});
|
||||
},
|
||||
mounted() {
|
||||
this.handleResize();
|
||||
window.addEventListener('resize', this.handleResize);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.handleResize);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.side-nav {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
padding-right: 30px;
|
||||
transition: opacity .3s;
|
||||
|
||||
&.is-fade {
|
||||
transition: opacity 3s;
|
||||
}
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
>ul>.nav-item>a {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
>ul>.nav-item:nth-child(-n + 4)>a {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
line-height: 40px;
|
||||
height: 40px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: .15s ease-out;
|
||||
font-weight: bold;
|
||||
|
||||
&.active {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #444;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: normal;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
color: #409EFF;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.sponsors {
|
||||
&>.sub-nav {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
&>a {
|
||||
color: #777;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
display: inline-block;
|
||||
|
||||
a {
|
||||
height: auto;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin: 8px 12px 12px 0;
|
||||
|
||||
img {
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
&:first-child a img {
|
||||
width: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-group__title {
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
line-height: 26px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#code-sponsor-widget {
|
||||
margin: 0 0 0 -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-list {
|
||||
width: 120px;
|
||||
margin-top: -8px;
|
||||
|
||||
li {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user