处理导航栏菜单左右点击移动会抖动的bug，页面缩放导致

08335 / hivui-platform-template

hivui平台项目模板

Browse code 处理导航栏菜单左右点击移动会抖动的bug，页面缩放导致 master
1 parent d346cfa commit d415e587986277cf9b52abc25e0957ec58c692e3 20278 authored on 1 Aug 2022

Showing 1 changed file

Ignore Space Show notes View project/hivuiMain/views/layout/components/navbar/index.vue
<template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="showAllFuncBtn"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> <div class="history" ref="dom-latelyUse" :title="$lang('recentlyUsed')\|\|'最近使用'" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang('recentlyUsed')\|\|'最近使用'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.$refs.allFuncBtn.getBoundingClientRect(); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.handleMenuScrollEnd(); this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn\|\|this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth-1){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script> <template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="showAllFuncBtn"> <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')\|\|'全部功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu> </div> <div class="history" ref="dom-latelyUse" :title="$lang('recentlyUsed')\|\|'最近使用'" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse"> <i class="icon iconfont icon-time"></i> <span class="title">{{$lang('recentlyUsed')\|\|'最近使用'}}</span> <i class="icon iconfont icon-arrow-down"></i> </div> <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''"> <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <i v-show="isMenuArrBtn" ref="scrollLtBtn" class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i> <div class="scroll" ref="domSrcoll"> <p-menu ref="pmenu" mode="horizontal" style="margin:0"> <template v-for="(item,index) in menus" > <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus> </template> </p-menu> </div> </div> <!-- <ul class="pl-menus pl-menus-horizontal"> <li class="pl-menus-item" v-for="(item,index) in menus"> <a class=""> <i class="icon"></i> <span class="title">{{item.title}}</span> </a> </li> </ul> --> <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse" @mouseleave="handleHideLatelyUse" :style="latelyUseStyle" v-add2Body> <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)"> <a class="title"><span class="txt">{{item.name}}</span></a> </li> <li v-show="navsLatelyUse.length==0" class="pl-menus-tips"> {{$lang('noData')\|\|'暂无数据'}} </li> </ul> </div> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' import allFuncMenu from '../allFuncMenu' import NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' }, showAllFuncBtn:window.customSysCofig.isShowAllFunc, isShowAllFuncMenu:false, allFuncBtnObj:{}, }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); this.allFuncBtnObj=this.$refs.allFuncBtn.getBoundingClientRect(); }, methods:{ resize(){ if (!screenfull.isFullscreen && this.$refs.pmenu.$el) { setTimeout(() => { let c = this.$refs.pmenu.$el.children,w=0; // console.log('---c--', c) for(let i=c.length-1;i>=0;i--){ // console.log('---c[i]', c[i].offsetWidth) w+=c[i].offsetWidth; } // console.log('offsetWidth', w) this.$refs.pmenu.$el.style.width=`${w+2}px`; this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; this.scrollBtnStatus(); }, 50); } }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.resUrl, name:item.name });//inject 提供的方法只能传一个参数 }, handleOpenFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name,item.resId)//,item.resId this.addTab(item);//inject 提供的方法只能传一个参数 }, handleShowLatelyUse(){ this.$store.dispatch('app/getLatelyUse')//最近使用 let s = this.$refs["dom-latelyUse"]; let rect = s.getBoundingClientRect(); this.latelyUseStyle.display ='block'; this.latelyUseStyle.left = rect.left+'px'; this.latelyUseStyle.top = rect.top + rect.height +'px'; this.latelyUseStyle.opacity = '1'; }, handleHideLatelyUse(){ this.latelyUseStyle.display ='none'; }, handleLtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleRtMenuScroll(){ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30; this.menuScrollTimer = setInterval(()=>{ this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10; this.scrollBtnStatus(); },50); this.scrollBtnStatus(); }, handleMenuScrollEnd(){ clearInterval(this.menuScrollTimer); }, scrollBtnStatus(){ if(!(this.$refs.scrollLtBtn\|\|this.$refs.scrollRtBtn)){ return; } if(this.$refs.domSrcoll.scrollLeft==0){ this.$refs.scrollLtBtn.style.opacity=0.3; }else{ this.$refs.scrollLtBtn.style.opacity=1; } if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } }, //全部功能弹窗 allFuncTrigger(){ let me=this; me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true; if(me.isShowAllFuncMenu){ me.$refs.allFuncMenu.showBox(); }else{ me.$refs.allFuncMenu.hideBox(); } }, allFuncTriggerOpen(){ let me=this; me.$refs.allFuncMenu.showBox(); }, allFuncTriggerClose(){ let me=this; me.$refs.allFuncMenu.hideBox(); }, } } </script>

Ignore Space Show notes View

project/hivuiMain/views/layout/components/navbar/index.vue

<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc" v-if="showAllFuncBtn">
            <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
            <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
        </div>
        <div class="history" ref="dom-latelyUse"
        :title="$lang('recentlyUsed')||'最近使用'"
         @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
            <i class="icon iconfont icon-time"></i>
            <span class="title">{{$lang('recentlyUsed')||'最近使用'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''">
            <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd" @mouseleave="handleMenuScrollEnd"></i>
            <div class="scroll" ref="domSrcoll">
                <p-menu ref="pmenu" mode="horizontal" style="margin:0">
                    <template v-for="(item,index) in menus" >
                        <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus>
                    </template>
                </p-menu>
            </div>
        </div>
        
        <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
        :style="latelyUseStyle" v-add2Body>
            <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)">
                <a class="title"><span class="txt">{{item.name}}</span></a>
            </li>
            <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                {{$lang('noData')||'暂无数据'}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import allFuncMenu from '../allFuncMenu'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            showAllFuncBtn:window.customSysCofig.isShowAllFunc,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},

};
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
        this.allFuncBtnObj=this.$refs.allFuncBtn.getBoundingClientRect();
    },
    methods:{ 
        resize(){
            if (!screenfull.isFullscreen && this.$refs.pmenu.$el) {
                setTimeout(() => {
                    let c = this.$refs.pmenu.$el.children,w=0;
                    // console.log('---c--', c)
                    for(let i=c.length-1;i>=0;i--){
                        // console.log('---c[i]', c[i].offsetWidth)
                        w+=c[i].offsetWidth;
                    }
                    // console.log('offsetWidth', w)
                    this.$refs.pmenu.$el.style.width=`${w+2}px`;
                    this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
                    this.scrollBtnStatus();
                }, 50);
                
            }
        },

handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name
            });//inject 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            // this.addTab(item.resUrl,item.name,item.resId)//,item.resId
            this.addTab(item);//inject 提供的方法只能 传一个参数
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.handleMenuScrollEnd();
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleRtMenuScroll(){
            this.handleMenuScrollEnd();
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleMenuScrollEnd(){
            clearInterval(this.menuScrollTimer);
        },
        scrollBtnStatus(){            
            if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){
                return;
            }
            if(this.$refs.domSrcoll.scrollLeft==0){
                this.$refs.scrollLtBtn.style.opacity=0.3;
            }else{                
                this.$refs.scrollLtBtn.style.opacity=1;
            }

if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth-1){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
    }
}
</script>

<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc" v-if="showAllFuncBtn">
            <span ref="allFuncBtn" class="title" @mouseenter="allFuncTriggerOpen" @mouseleave="allFuncTriggerClose">{{$lang('allFunction')||'全部功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
            <allFuncMenu ref="allFuncMenu" :triggerObj="allFuncBtnObj" v-add2Body></allFuncMenu>
        </div>
        <div class="history" ref="dom-latelyUse"
        :title="$lang('recentlyUsed')||'最近使用'"
         @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse">
            <i class="icon iconfont icon-time"></i>
            <span class="title">{{$lang('recentlyUsed')||'最近使用'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </div>
        <div class="menusArea pl-cl" :class="isMenuArrBtn?'hasMenusBtn':''">
            <i v-show="isMenuArrBtn" ref="scrollRtBtn" class="arrRt iconfont icon-arrow-right-circle" @mousedown="handleRtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <i v-show="isMenuArrBtn" ref="scrollLtBtn"  class="arrLt iconfont icon-arrow-left-circle" @mousedown="handleLtMenuScroll" @mouseup="handleMenuScrollEnd"></i>
            <div class="scroll" ref="domSrcoll">
                <p-menu ref="pmenu" mode="horizontal" style="margin:0">
                    <template v-for="(item,index) in menus" >
                        <p-menu-item v-if="item.isShow&&!(item.children&&item.children.length)" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="item.isShow&&item.children&&item.children.length"></nav-sub-menus>
                    </template>
                </p-menu>
            </div>
        </div>
        
        <ul class="pl-menus pl-menus-sub pl-menus-pop" @mouseenter="handleShowLatelyUse"  @mouseleave="handleHideLatelyUse"
        :style="latelyUseStyle" v-add2Body>
            <li class="pl-menus-item" v-for="item,index in navsLatelyUse" @click="handleOpenLatelyFunc(item)">
                <a class="title"><span class="txt">{{item.name}}</span></a>
            </li>
            <li v-show="navsLatelyUse.length==0" class="pl-menus-tips">
                {{$lang('noData')||'暂无数据'}}
            </li>
        </ul> 
    </div>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
import allFuncMenu from '../allFuncMenu'
import NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus,allFuncMenu
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            },
            showAllFuncBtn:window.customSysCofig.isShowAllFunc,
            isShowAllFuncMenu:false,
            allFuncBtnObj:{},

handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.resUrl,
                name:item.name
            });//inject 提供的方法只能 传一个参数
        },     
        handleOpenFunc(item){  
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            // this.addTab(item.resUrl,item.name,item.resId)//,item.resId
            this.addTab(item);//inject 提供的方法只能 传一个参数
        },
        handleShowLatelyUse(){
            this.$store.dispatch('app/getLatelyUse')//最近使用 
            let s = this.$refs["dom-latelyUse"];
            let rect = s.getBoundingClientRect();
            this.latelyUseStyle.display ='block';
            this.latelyUseStyle.left = rect.left+'px';
            this.latelyUseStyle.top = rect.top + rect.height  +'px';
            this.latelyUseStyle.opacity = '1';
        },
        handleHideLatelyUse(){
            this.latelyUseStyle.display ='none';
        },
        handleLtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft-10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleRtMenuScroll(){
            this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+30;
            this.menuScrollTimer = setInterval(()=>{
                this.$refs.domSrcoll.scrollLeft=this.$refs.domSrcoll.scrollLeft+10;
                this.scrollBtnStatus();
            },50);
            this.scrollBtnStatus();
        },
        handleMenuScrollEnd(){
            clearInterval(this.menuScrollTimer);
        },
        scrollBtnStatus(){            
            if(!(this.$refs.scrollLtBtn||this.$refs.scrollRtBtn)){
                return;
            }
            if(this.$refs.domSrcoll.scrollLeft==0){
                this.$refs.scrollLtBtn.style.opacity=0.3;
            }else{                
                this.$refs.scrollLtBtn.style.opacity=1;
            }

if(this.$refs.domSrcoll.scrollLeft>=this.$refs.pmenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        },
        //全部功能弹窗
        allFuncTrigger(){
            let me=this;
            me.isShowAllFuncMenu=me.isShowAllFuncMenu?false:true;
            if(me.isShowAllFuncMenu){
                me.$refs.allFuncMenu.showBox();
            }else{
                me.$refs.allFuncMenu.hideBox();
            }
        },
        allFuncTriggerOpen(){
            let me=this;
            me.$refs.allFuncMenu.showBox();
        },
        allFuncTriggerClose(){
            let me=this;
            me.$refs.allFuncMenu.hideBox();
        },
    }
}
</script>

Show line notes below