zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

侧边栏高亮优化

1205-rankList-fix
zq 3 days ago
parent
e15dc6c8eb
commit
229f9bcb12
2 changed files with 171 additions and 201 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 281
      src/components/SetLeftMenu.vue
  2. 85
      src/store/index.js

281
src/components/SetLeftMenu.vue
View File

@ -3,14 +3,17 @@
<ul style="margin: 0;">
<li v-for="(item, index) in menuList" :key="item.path + random()">
<div
:class="[($route.path == item.path) || (!item.path && curIndex == index) ? 'active' : '', 'flex', ($route.path == item.path) ? curIndex = index : '']" @click="gotoPath(item, index)">
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="($route.path == item.path || (!item.path && curIndex == index))" />
:class="[curIndex === index ? 'active' : '','flex']" @click="gotoPath(item, index)">
<SvgIcon1 :iconPath="require(`@/assets/${item.img}`)" defaultColor="#8A9099" :size="16" activeColor="#006AFF"
:isActive="curIndex === index" />
<span class="title_text">{{ item.name }}</span>
</div>
<p :class="['flex', (activeFloor && (activeFloor == item1.desc || activeFloor == item1.path)) ? 'curActive' : '']" v-for="(item1) in item.list"
@click="setActiveCur(item1, item,index)" :key="item1.name">{{ item1.name }}</p>
<p v-for="(item1) in item.list" :key="item1.name" :class="[
'flex',
activeFloor === (item1.desc || item1.path || item1.componentsName) ? 'curActive' : ''
]" @click="setActiveCur(item1, item, index)">
{{ item1.name }}
</p>
</li>
</ul>
</aside>
@ -18,22 +21,16 @@
<script>
import SvgIcon1 from '@/components/SvgIcon1.vue';
// :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: {
menuList: {
type: Array,
required: true
},
// activeFloor:{
// type:String
// },
// curIndex:{
// type:Number
// }
}
},
components: {
SvgIcon1,
@ -41,33 +38,31 @@ export default {
data() {
return {
activeFloor: null,
curIndex: 0,
curIndex: -1, // 初始化为 -1，表示未找到匹配项
scrollLock: false,
componentsName:''
componentsName: '',
// 记录每个子菜单项对应的父菜单索引
pathToIndexMap: {}
}
},
watch: {
'$route'() {
// console.log(to, from);
// 路由变化时重新计算位置
this.$nextTick(() => {
this.calculateFloorOffsets();
this.handleScroll(); // 立即检查当前位置
});
'$route.path': {
immediate: true, // 立即执行一次
handler(newPath) {
this.updateActiveMenu(newPath);
}
}
},
mounted() {
let curItem = this.menuList[this.curIndex];
// 增加单项初始值判断
if(!curItem.list || !curItem.list.length){
this.activeFloor = curItem.path
}else{
this.activeFloor = curItem?.list?.[0]?.desc || curItem?.list?.[0]?.path;
}
this.componentsName = curItem?.list?.[0]?.componentsName;
// 初始化路径映射表
this.buildPathMap();
// 根据当前路由更新激活状态
this.updateActiveMenu(this.$route.path);
this.$nextTick(() => {
// 更可靠的获取滚动容器方式
this.scrollContainer = document.querySelector('.main-content') ||
document.getElementById('main-content') ||
window;
@ -80,55 +75,117 @@ export default {
}
});
},
beforeDestroy() {
if (this.scrollContainer) {
this.scrollContainer.removeEventListener('scroll', this.handleScroll);
}
},
created() {
// console.log(this.$parent.$refs.scrollContainer,'this.$refs.sc--rollContainer--');
},
computed: {
...mapState(['pageTitle', 'carryParam']) // 从Vuex映射showSidebar状态到组件的计算属性中
...mapState(['pageTitle', 'carryParam'])
},
methods: {
// 构建路径到父菜单索引的映射
buildPathMap() {
const map = {};
this.menuList.forEach((item, parentIndex) => {
if (item.list && item.list.length) {
item.list.forEach(subItem => {
if (subItem.path) {
map[subItem.path] = parentIndex;
}
});
}
});
this.pathToIndexMap = map;
},
// 根据当前路由更新激活的菜单项
updateActiveMenu(currentPath) {
// 1. 先尝试匹配二级菜单路径
const parentIndex = this.pathToIndexMap[currentPath];
if (parentIndex !== undefined) {
this.curIndex = parentIndex;
// 找到对应的二级菜单项
const parentItem = this.menuList[parentIndex];
const subItem = parentItem.list.find(item => item.path === currentPath);
if (subItem) {
// 如果是组件切换模式
if (subItem.componentsName) {
this.activeFloor = subItem.componentsName;
store.commit('SET_COMPONENTS_NAME', subItem.componentsName);
} else {
// 如果是路由模式
this.activeFloor = subItem.desc || subItem.path;
}
return;
}
}
// 2. 如果找不到匹配的二级路径，尝试匹配一级路径
for (let i = 0; i < this.menuList.length; i++) {
const item = this.menuList[i];
if (item.path && item.path === currentPath) {
this.curIndex = i;
this.activeFloor = item.path;
// 如果有子菜单，默认选中第一个
if (item.list && item.list.length) {
const firstSubItem = item.list[0];
if (firstSubItem.componentsName) {
store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
}
}
return;
}
}
// 3. 如果都没有匹配，默认选中第一个菜单项
if (this.curIndex === -1 && this.menuList.length > 0) {
this.curIndex = 0;
const firstItem = this.menuList[0];
if (firstItem.list && firstItem.list.length) {
const firstSubItem = firstItem.list[0];
this.activeFloor = firstSubItem.desc || firstSubItem.path || firstSubItem.componentsName;
if (firstSubItem.componentsName) {
store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
}
} else {
this.activeFloor = firstItem.path;
}
}
},
random() {
var randomNumber = Math.random();
return randomNumber
return Math.random();
},
calculateFloorOffsets() {
this.menuList.forEach(item => {
item.list?.forEach(every => {
const el = document.getElementById(every.desc);
if (el) {
// 获取元素相对于视口顶部的距离
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
}
});
if (this.curIndex === -1 || !this.menuList[this.curIndex]?.list) return;
this.menuList[this.curIndex].list?.forEach(every => {
const el = document.getElementById(every.desc);
if (el) {
every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
}
});
},
handleScroll() {
if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
if (this.scrollLock || this.curIndex === -1 || !this.menuList[this.curIndex]?.list) return;
const scrollPosition = this.getScrollPosition();
let activeFloor = null;
console.log(this.curIndex,scrollPosition,'this.curIndex===');
// 从下往上查找当前可见区域对应的楼层
// for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
// const item = this.menuList[this.curIndex].list[i];
// if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
// activeFloor = item.desc;
// break;
// }
// }
// 从上往下
// 从上往下查找当前可见区域对应的楼层
for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
const item = this.menuList[this.curIndex].list[i];
if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
activeFloor = item.desc;
break;
if (item.offsetTop && scrollPosition + 100 >= item.offsetTop) {
activeFloor = item.desc || item.componentsName;
}
}
@ -143,93 +200,89 @@ export default {
}
return this.scrollContainer.scrollTop;
},
// 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)
// },
// setHighActive(dom) {
// this.scrollLock = true;
// const ele = document.getElementById(dom)
// if (!ele) return
// ele.classList.add('ceshi')
// ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
// setTimeout(() => {
// ele.classList.remove('ceshi')
// }, 1000)
// }
gotoPath(item) {
gotoPath(item, index) {
this.curIndex = index;
let path = item.path;
this.activeFloor = path
if (!path) {
this.curIndex = 0;
return;
// 如果菜单项没有自己的path但有子菜单，默认选中第一个子项
if (!path && item.list && item.list.length) {
const firstSubItem = item.list[0];
if (firstSubItem.componentsName) {
this.activeFloor = firstSubItem.componentsName;
store.commit('SET_COMPONENTS_NAME', firstSubItem.componentsName);
} else if (firstSubItem.path) {
// 如果有二级路径，跳转到二级路径
this.setActiveCur(firstSubItem, item, index);
return;
}
}
if (this.$route.path != path) {
this.curIndex = 0;
this.activeFloor = path;
if (!path) {
this.scrollLock = false;
this.handleScroll();
return;
}
// 携带当前所有参数跳转
if (this.$route.path !== path) {
this.$router.push({
path: path,
query: { ...this.$route.query }, // 携带所有查询参数
params: { ...this.$route.params } // 携带所有路由参数
query: { ...this.$route.query },
params: { ...this.$route.params }
});
// 重置页面滚动高度
const dom = document.getElementById('main-content');
if (dom) dom.scrollTop = 0;
}
},
setActiveCur(item1, item,index) {
setActiveCur(item1, item, index) {
this.curIndex = index;
let componentsName = item1?.componentsName;
// 如果采用的是 组件切换显示的办法
if(componentsName){
// 组件切换模式
if (componentsName) {
this.activeFloor = componentsName;
// 同步 当前切换的组件名称
store.commit('SET_COMPONENTS_NAME', componentsName);
return
return;
}
// 如果 是路由跳转
// 如果 二级菜单同时存在路由 那么跳转以二级路由为优先
// 如果 是同一页面 只是页面区域的滚动展示 那么跳转一级路由
let path = item1.path || item.path;
if ( this.$route.path !== path) {
if(this.carryParam){
// 携带当前所有参数跳转
if (path && this.$route.path !== path) {
if (this.carryParam) {
this.$router.push({
path: path,
query: { ...this.$route.query }, // 携带所有查询参数
params: { ...this.$route.params } // 携带所有路由参数
query: { ...this.$route.query },
params: { ...this.$route.params }
});
}else{
} else {
this.$router.push(path);
}
store.commit('SET_PAGETITLE', item.name);
// 如果是跳转到新页面，重置滚动
const dom = document.getElementById('main-content');
if (dom) dom.scrollTop = 0;
}
this.scrollLock = true;
if(item1.desc){
if (item1.desc) {
this.activeFloor = item1.desc;
}
// 如果 二级路由存在跳转 那么不再进行页面的滚动
if(item1.path){
if (item1.path) {
this.activeFloor = item1.path;
return
return;
}
this.$nextTick(() => {
this.setHighActive(item1.desc);
if (item1.desc) {
this.setHighActive(item1.desc);
}
setTimeout(() => {
this.scrollLock = false;
}, 1000);
@ -244,9 +297,9 @@ export default {
eles[i].classList.remove('siteMessage-active');
}
ele.classList.add('siteMessage-active');
setTimeout(function (){
ele.classList.remove('siteMessage-active');
},1000)
setTimeout(() => {
ele.classList.remove('siteMessage-active');
}, 1000);
ele.scrollIntoView({
behavior: 'smooth',
block: 'start'
@ -265,10 +318,12 @@ export default {
background: #FFFFFF;
box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
}
ul{
ul {
height: 100%;
overflow-y: auto;
}
.ceshi {
// animation: fadeInOut 2s infinite;
}

85
src/store/index.js
View File

@ -402,91 +402,6 @@ export default new Vuex.Store({
]
}
],
siteSettingData1: [{
name: '基本设置',
path: '/agent/siteBaseSetting',
img: 'site/sitebase.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [{
name: '站点信息',
desc: 'siteMessage1'
},
{
name: '域名设置',
desc: 'siteMessage2'
},
{
name: '渠道设置',
desc: 'siteMessage14'
},
{
name: '收款方式',
desc: 'siteMessage3'
},
]
},
{
name: '个性化设置',
path: '/agent/sitePersonalization',
img: 'site/gexinghua.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [{
name: '网页模板',
desc: 'siteMessage4'
},
{
name: '客服设置',
desc: 'siteMessage5'
},
{
name: '功能显隐',
desc: 'siteMessage6'
},
{
name: '安全提交',
desc: 'siteMessage7'
},
{
name: '初始订单数',
desc: 'siteMessage8'
},
]
},
{
name: '移动端设置',
path: '/agent/siteMobileSetting',
img: 'site/siteh5.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [{
name: '微信H5',
desc: 'siteMessage9'
},
{
name: '小程序',
desc: 'siteMessage10'
},
]
},
{
name: '营销推广',
path: '/siteSetting/siteSem',
img: 'site/sitesem.svg',
imgActive: require('@/assets/site/sitebase_active.svg'),
list: [{
name: 'SEO设置',
desc: 'siteMessage11'
},
{
name: 'SEM设置',
desc: 'siteMessage12'
},
{
name: '访问统计',
desc: 'siteMessage13'
},
]
}
],
siteSettingData: [ //第二种侧边栏 -- 点击单项进行页面滚动
{
name: '基本设置',

Write Preview
Loading…
Cancel
Save