左右结构菜单bug

08335 / hivui-platform-template

hivui平台项目模板

Browse code 左右结构菜单bug master
1 parent b194362 commit 16c6cca0f8c1111515bde31f492d12794120fdde 20278 authored on 29 Mar 2022

Showing 1 changed file

Ignore Space Show notes View project/hivuiMain/views/layout/components/Sidebar.vue
<template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#08111f',top:totop+'px',color:'#e6e6e6'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass \|\| 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </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"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass \| getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null\|\|item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ } /* return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } / }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, 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.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){ this.$refs.scrollRtBtn.style.opacity=0.3; }else{ this.$refs.scrollRtBtn.style.opacity=1; } } } } </script> <template> <div v-if="layout == 'level'" class="pl-sidebar" :style="{width: this.sideWidth, background:'#08111f',top:totop+'px',color:'#e6e6e6'}"> <div class="menusArea pl-cl"> <div class="scroll" ref="domSrcoll"> <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0}"> <template v-for="(item,index) in menus"> <!-- <Smenu-item v-if="!item.children\|\|!item.children.length" :icon="item.iconClass" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> --> <Smenu-item v-if="!item.children\|\|!item.children.length" :hasTitle="hasTitle" :icon="item.iconClass \|\| 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item> <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" v-if="item.children&&item.children.length" ></Snav-sub-menus> </template> </Smenu> </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"> 没有数据 </li> </ul> --> </div> <div v-else class="pl-sidebar"> <GeminiScrollbar> <ul class="menus"> <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in navs" :key="index" :title="item.name" @click="handleOpenFunc(item)"> <div class="box"> <img v-if="item.iconClass" :src="item.iconClass \| getIconServePath" width="42" height="42"/> <img v-if="item.iconClass==null\|\|item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/> <!-- <i class="iconfont"><img v-if="item.iconClass" :src="item.iconClass" width="24" height="24"/></i> --> <span v-if="item.markCount" class="tip">{{item.markCount}}</span> </div> <div class="title">{{item.name}}</div> </li> </ul> </GeminiScrollbar> </div> </template> <script> import {Smenu,SsubMenu,SmenuItem} from './Smenus' import SnavSubMenus from './side/Smenus' export default { inject:['addTab'], components:{ Smenu,SsubMenu,SmenuItem,SnavSubMenus }, props:{ sideWidth:{ type: String, }, hasTitle:{ type: Boolean, }, totop:{ type: Number } }, data(){ return{ } / return { navs:[ { iconClass:"", name:"新建事项", url:"", }, { iconClass:"", name:"销售排行", url:"" }, { iconClass:"", name:"待办工作", url:"" }, { iconClass:"", name:"薪资查看", url:"", count:10 }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, { iconClass:"", name:"我的日程", url:"", count:8 }, { iconClass:"", name:"待开会议", url:"" }, { iconClass:"", name:"签到", url:"" }, { iconClass:"", name:"快捷管理", url:"" }, ] } */ }, computed:{ navs(){ return this.$store.getters.navs; }, layout(){ return window.localStorage.getItem('layout'); }, menus(){ return this.$store.getters.menus; }, navsLatelyUse(){ return this.$store.getters.navsLatelyUse; } }, mounted(){ // this.resize(); window.addEventListener('resize',this.resize); }, filters: { getIconServePath(path){ let file = path.split(";"); if(file[2]){ return `/amrept-web/checkPhoto/photo.do?path=${file[2]}` }else{ return ""; } } }, methods:{ // resize(){ // let c = this.$refs.smenu.$el.children,w=0; // for(let i=c.length-1;i>=0;i--){ // w+=c[i].offsetWidth; // } // this.$refs.smenu.$el.style.width=`${w+2}px`; // this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w; // this.scrollBtnStatus(); // }, handleOpenLatelyFunc(item){ if(item.type== "link"){ window.open(item.resUrl,item.name); return; } this.addTab({ resUrl:item.FURI, 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.smenu.$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/Sidebar.vue

<template>
    <div v-if="layout == 'level'" class="pl-sidebar"  :style="{width: this.sideWidth, background:'#08111f',top:totop+'px',color:'#e6e6e6'}">
                <div class="menusArea pl-cl">
                    <div class="scroll" ref="domSrcoll">
                        <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0}">
                            <template v-for="(item,index) in menus">
                                
                                
                                <Smenu-item v-if="item.isShow&&!(item.children&&item.children.length)" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
                                <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" v-if="item.isShow&&item.children&&item.children.length" ></Snav-sub-menus>
                            </template>
                        </Smenu>
                    </div>
                </div>
            
        </div>
    <div v-else class="pl-sidebar">
        <GeminiScrollbar>
            <ul class="menus">
                <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in  navs" :key="index" :title="item.name" @click="handleOpenFunc(item)">
                    <div class="box">
                        <img v-if="item.iconClass" :src="item.iconClass | getIconServePath"  width="42" height="42"/>
                        <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/>
                        
                        <span v-if="item.markCount" class="tip">{{item.markCount}}</span>
                    </div>
                    <div class="title">{{item.name}}</div>
                </li>
            </ul>
        </GeminiScrollbar>
    </div>
</template>
<script>
import {Smenu,SsubMenu,SmenuItem} from './Smenus'
import SnavSubMenus from './side/Smenus'
export default {
    inject:['addTab'],
     components:{
        Smenu,SsubMenu,SmenuItem,SnavSubMenus
    },
    props:{
        sideWidth:{
            type: String,
        },
        hasTitle:{
            type: Boolean,
        },
        totop:{
            type: Number
        }
    },
    data(){
        return{

}
    /*
        return {
            navs:[
                {
                    iconClass:"",
                    name:"新建事项",
                    url:"",
                },
                {
                    iconClass:"",
                    name:"销售排行",
                    url:""
                },
                {
                    iconClass:"",
                    name:"待办工作",
                    url:""
                },
                {
                    iconClass:"",
                    name:"薪资查看",
                    url:"",
                    count:10
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
                {
                    iconClass:"",
                    name:"我的日程",
                    url:"",
                    count:8
                },
                {
                    iconClass:"",
                    name:"待开会议",
                    url:""
                },
                {
                    iconClass:"",
                    name:"签到",
                    url:""
                },
                {
                    iconClass:"",
                    name:"快捷管理",
                    url:""
                },
            ]
        }
    */
    },
    computed:{
        navs(){
            return this.$store.getters.navs;
        },
        layout(){
            return window.localStorage.getItem('layout');
        },
        menus(){
            return this.$store.getters.menus;
        },
        navsLatelyUse(){
            return this.$store.getters.navsLatelyUse;
        }
    },
    mounted(){
        // this.resize();
        window.addEventListener('resize',this.resize);
    },
    filters: {
        getIconServePath(path){
            let file = path.split(";");
            if(file[2]){
                return `/amrept-web/checkPhoto/photo.do?path=${file[2]}`
            }else{
                return "";
            }
        }
    },
    methods:{
    //    resize(){
    //         let c = this.$refs.smenu.$el.children,w=0;
    //         for(let i=c.length-1;i>=0;i--){
    //             w+=c[i].offsetWidth;
    //         }
    //         this.$refs.smenu.$el.style.width=`${w+2}px`;
    //         this.isMenuArrBtn = this.$refs.domSrcoll.offsetWidth<w;
    //         this.scrollBtnStatus();
    //     },
        handleOpenLatelyFunc(item){      
            if(item.type== "link"){
                window.open(item.resUrl,item.name);
                return;
            }
            this.addTab({
                resUrl:item.FURI,
                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.smenu.$el.offsetWidth-this.$refs.domSrcoll.offsetWidth){
                this.$refs.scrollRtBtn.style.opacity=0.3;
            }else{
                this.$refs.scrollRtBtn.style.opacity=1;
            }
        }
    }
}
</script>

<template>
    <div v-if="layout == 'level'" class="pl-sidebar"  :style="{width: this.sideWidth, background:'#08111f',top:totop+'px',color:'#e6e6e6'}">
                <div class="menusArea pl-cl">
                    <div class="scroll" ref="domSrcoll">
                        <Smenu ref="smenu" mode="horizontal" :style="{width: sideWidth,margin: 0}">
                            <template v-for="(item,index) in menus">
                                
                                <Smenu-item v-if="!item.children||!item.children.length" :hasTitle="hasTitle" :icon="item.iconClass || 'icon-bell'" @click="handleOpenFunc(item)">{{item.name}}</Smenu-item>
                                <Snav-sub-menus :hasTitle="hasTitle" :menuitem="item" v-if="item.children&&item.children.length" ></Snav-sub-menus>
                            </template>
                        </Smenu>
                    </div>
                </div>
            
        </div>
    <div v-else class="pl-sidebar">
        <GeminiScrollbar>
            <ul class="menus">
                <li :class="['item','itemBg'+(index%8+1)]" v-for="(item,index) in  navs" :key="index" :title="item.name" @click="handleOpenFunc(item)">
                    <div class="box">
                        <img v-if="item.iconClass" :src="item.iconClass | getIconServePath"  width="42" height="42"/>
                        <img v-if="item.iconClass==null||item.iconClass==''" src="@main/assets/def_Func.png" width="42" height="42"/>
                        
                        <span v-if="item.markCount" class="tip">{{item.markCount}}</span>
                    </div>
                    <div class="title">{{item.name}}</div>
                </li>
            </ul>
        </GeminiScrollbar>
    </div>
</template>
<script>
import {Smenu,SsubMenu,SmenuItem} from './Smenus'
import SnavSubMenus from './side/Smenus'
export default {
    inject:['addTab'],
     components:{
        Smenu,SsubMenu,SmenuItem,SnavSubMenus
    },
    props:{
        sideWidth:{
            type: String,
        },
        hasTitle:{
            type: Boolean,
        },
        totop:{
            type: Number
        }
    },
    data(){
        return{

Show line notes below