菜单显示bug

08335 / hivui-platform-template

hivui平台项目模板

Browse code 菜单显示bug master
1 parent 6137341 commit 8e0cf5f2227854d8ca06a09c06bfadba852c525e 20278 authored on 16 Dec 2021

Showing 2 changed files

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="false"> <span class="title">{{$lang('allFunction')\|\|'所有功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> </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 NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); }, 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'; }, 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; } } } } </script> <template> <div class="pl-navbar" ref="nav"> <div class="allFunc" v-if="false"> <span class="title">{{$lang('allFunction')\|\|'所有功能'}}</span> <i class="icon iconfont icon-arrow-down"></i> </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.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="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 NavSubMenus from './menus' import screenfull from 'screenfull' export default { inject:['addTab'], components:{ PMenu,PSubMenu,PMenuItem,NavSubMenus }, data(){ return { menuScrollTimer:null, isMenuArrBtn:false, latelyUseStyle:{ display:'none', left:0, top:0, maxHeight:'50%', overflow:'auto' } }; }, computed:{ menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ this.resize(); window.addEventListener('resize',this.resize); }, 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'; }, 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; } } } } </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="false">
            <span class="title">{{$lang('allFunction')||'所有功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </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 NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        };
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
    },
    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';
        },
        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;
            }
        }
    }
}
</script>

<template>
    <div class="pl-navbar" ref="nav">
        <div class="allFunc" v-if="false">
            <span class="title">{{$lang('allFunction')||'所有功能'}}</span>
            <i class="icon iconfont icon-arrow-down"></i>
        </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.children||!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>
                        <nav-sub-menus  :menuitem="item" v-if="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 NavSubMenus from './menus'
import screenfull from 'screenfull'
export default {
    inject:['addTab'],
    components:{
        PMenu,PSubMenu,PMenuItem,NavSubMenus
    },
    data(){
        return {
            menuScrollTimer:null,
            isMenuArrBtn:false,
            latelyUseStyle:{
                display:'none',
                left:0,
                top:0,
                maxHeight:'50%',
                overflow:'auto'
            }
        };
    },
    computed:{
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        this.resize();
        window.addEventListener('resize',this.resize);
    },
    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);
                
            }
        },

Ignore Space Show notes View project/hivuiMain/views/layout/components/navbar/menus.vue
<template> <p-sub-menu :level="level" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="item.isShow&&!(item.children&&item.children.length)" @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-sub-menu> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' export default { name:'NavSubMenus', inject:['addTab','showTab','hideTab'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script> <template> <p-sub-menu :level="level" :parent="parent"> <template slot="title">{{menuitem.name}}</template> <template v-for="(item,index) in menuitem.children"> <p-menu-item :icon="item.iconClass" v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item> <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus> </template> </p-sub-menu> </template> <script> import {PMenu,PSubMenu,PMenuItem} from '../menus' export default { name:'NavSubMenus', inject:['addTab','showTab','hideTab'], components:{ PMenu,PSubMenu,PMenuItem }, props:{ menuitem:{ type:Object }, level:{ type:Number }, parent:{ type:Object } }, methods:{ handleOpenFunc(item){ //url,title,uid,callback,nearest if(item.type== "link"){ window.open(item.resUrl,item.name); return; } // this.addTab(item.resUrl,item.name) this.addTab(item);//inject 提供的方法只能传一个参数 } } } </script>

Ignore Space Show notes View

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

<template>
    <p-sub-menu :level="level" :parent="parent">
        <template slot="title">{{menuitem.name}}</template>
        <template v-for="(item,index) in menuitem.children">
            <p-menu-item :icon="item.iconClass"  v-if="item.isShow&&!(item.children&&item.children.length)" @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-sub-menu>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
export default {
    name:'NavSubMenus',
    inject:['addTab','showTab','hideTab'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }

// this.addTab(item.resUrl,item.name)
            this.addTab(item);//inject 提供的方法只能 传一个参数
        }
    }
}
</script>

<template>
    <p-sub-menu :level="level" :parent="parent">
        <template slot="title">{{menuitem.name}}</template>
        <template v-for="(item,index) in menuitem.children">
            <p-menu-item :icon="item.iconClass"  v-if="!(item.children&&item.children.length)" @click="handleOpenFunc(item)">{{item.name}}</p-menu-item>            
            <nav-sub-menus :menuitem="item" v-if="item.children&&item.children.length"></nav-sub-menus>
        </template>
    </p-sub-menu>
</template>
<script> 
import {PMenu,PSubMenu,PMenuItem} from '../menus'
export default {
    name:'NavSubMenus',
    inject:['addTab','showTab','hideTab'],
    components:{
        PMenu,PSubMenu,PMenuItem
    },
    props:{
        menuitem:{
            type:Object
        },
        level:{
            type:Number
        },
        parent:{
            type:Object
        }
    },
    methods:{  
        handleOpenFunc(item){
            //url,title,uid,callback,nearest
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }

// this.addTab(item.resUrl,item.name)
            this.addTab(item);//inject 提供的方法只能 传一个参数
        }
    }
}
</script>

Show line notes below