|
|
@ -3,22 +3,22 @@ |
|
|
|
<ul> |
|
|
|
<li v-for="(item, index) in menuList" :key="item.path"> |
|
|
|
<div :class="[$route.path == item.path ? 'active' : '', 'flex', $route.path == item.path ? curIndex = index : '']" |
|
|
|
@click="gotoPath(item.path)"> |
|
|
|
@click="gotoPath(item.path,index)"> |
|
|
|
<img v-if="$route.path == item.path" :src="item.imgActive" alt=""> |
|
|
|
<img v-else :src="item.img" alt=""> |
|
|
|
{{ item.name }} |
|
|
|
</div> |
|
|
|
<p :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']" |
|
|
|
v-for="(item1) in item.list" @click="setActiveCur(item1.desc)" :key="item1.name">{{ item1.name }}</p> |
|
|
|
|
|
|
|
<p :class="['flex', activeFloor == item1.desc ? 'curActive' : '']" |
|
|
|
v-for="(item1) in item.list" @click="setActiveCur(item1.desc,item)" :key="item1.name">{{ item1.name }}</p> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</aside> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
// import {setHighActive} from '@/utils/common'; |
|
|
|
|
|
|
|
// :class="[$route.path != item.path ? 'not-point' : '', 'flex', activeFloor == item1.desc ? 'curActive' : '']" |
|
|
|
import { mapState } from 'vuex'; |
|
|
|
import store from '../store'; |
|
|
|
export default { |
|
|
|
name: 'Sidebar', |
|
|
|
props: { |
|
|
@ -32,8 +32,6 @@ export default { |
|
|
|
// curIndex:{ |
|
|
|
// type:Number |
|
|
|
// } |
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
data() { |
|
|
|
return { |
|
|
@ -129,7 +127,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted() { |
|
|
|
console.log(this.curIndex,'this.curIndex'); |
|
|
|
// console.log(this.curIndex,'this.curIndex'); |
|
|
|
this.activeFloor = this.menuList[this.curIndex]['list'][0]['desc']; |
|
|
|
this.calculateFloorOffsets(); |
|
|
|
this.$nextTick(() => { |
|
|
@ -140,6 +138,9 @@ export default { |
|
|
|
created() { |
|
|
|
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--'); |
|
|
|
}, |
|
|
|
computed: { |
|
|
|
...mapState(['pageTitle']) // 从Vuex映射showSidebar状态到组件的计算属性中 |
|
|
|
}, |
|
|
|
beforeDestroy() { |
|
|
|
this.$parent.$refs.scrollContainer.removeEventListener('scroll', this.handleScroll); |
|
|
|
}, |
|
|
@ -168,19 +169,34 @@ export default { |
|
|
|
}); |
|
|
|
this.activeFloor = activeFloor; // 更新数据以触发视图更新 |
|
|
|
}, |
|
|
|
setActiveCur(dom) { |
|
|
|
setActiveCur(dom,item) { |
|
|
|
if(this.$route.path != item.path){ |
|
|
|
this.$router.push(item.path) |
|
|
|
store.commit('SET_PAGETITLE', item.name); |
|
|
|
} |
|
|
|
setTimeout(()=>{ |
|
|
|
this.activeFloor = dom; |
|
|
|
this.setHighActive(dom) |
|
|
|
},500) |
|
|
|
}, |
|
|
|
gotoPath(path) { |
|
|
|
gotoPath(path,index) { |
|
|
|
if(this.$route.path != path){ |
|
|
|
this.curIndex = index |
|
|
|
this.scrollLock = false; |
|
|
|
this.handleScroll() |
|
|
|
// 重置页面滚动高度 |
|
|
|
const dom = document.getElementById('main-content') |
|
|
|
dom.scrollTop = 0 |
|
|
|
this.$router.push(path) |
|
|
|
} |
|
|
|
}, |
|
|
|
activeArea(type) { |
|
|
|
console.log(type); |
|
|
|
}, |
|
|
|
setHighActive(dom) { |
|
|
|
this.scrollLock = true |
|
|
|
this.scrollLock = true; |
|
|
|
const ele = document.getElementById(dom) |
|
|
|
if(!ele)return |
|
|
|
ele.classList.add('ceshi') |
|
|
|
ele.scrollIntoView({ behavior: 'smooth', block: 'start' }) |
|
|
|
setTimeout(() => { |
|
|
|