左右结构菜单定位bug处理

08335 / hivui-platform-template

hivui平台项目模板

Browse code 左右结构菜单定位bug处理 master
1 parent bd2cb24 commit 658aeafb4528bc554a62672b45b2a364b5ac2165 20278 authored on 10 Jun 2022

Showing 1 changed file

Ignore Space Show notes View project/hivuiMain/views/layout/components/Smenus/subMenu.jsx
import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, hasTitle:{ type:Boolean }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, mounted(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let h = document.documentElement.offsetHeight; if(!subMenuDom.dataWidth){ subMenuDom.dataWidth=subMenuDom.offsetWidth; subMenuDom.style.width = '0'; } if(!subMenuDom.dataHeight){ subMenuDom.dataHeight=(subMenuDom.offsetHeight>h?h:subMenuDom.offsetHeight)+1; } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width: rect.width, height: rect.height } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>h?h:sh; if(subMenuDom.dataWidth){ sw=subMenuDom.dataWidth; } if(subMenuDom.dataHeight){ sh=subMenuDom.dataHeight; } if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; // subMenuDom.style.left = p.width + sw + 'px'; subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px'; }else{ // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; subMenuDom.style.left = p.width + 'px'; subMenuDom.style.top = (p.top-p.height+sh>h?h-sh:p.top-p.height)+'px'; } // subMenuDom.style.left = 171 + 'px'; // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px'; // subMenuDom.style.top = (p.top-36) + 'px'; subMenuDom.style.opacity = '1'; subMenuDom.style.height = sh+'px'; subMenuDom.style.width = sw+'px'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; subMenuDom.style.width = '0'; // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); }, handleSubMouseLeave(){ this.hideParent(); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, hasTitle:props.hasTitle, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-Smenus-sub']:1, ['pl-Smenus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const hasTitle = props.hasTitle; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-Smenus-item']:1, ['pl-Smenus-itemSeld']:isActive, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, style:{ ['wdith']: hasTitle?'140px':'48px' } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } / {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} / /* * 菜单太多的问题 * 子菜单独立渲染添加滚动条 / return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level==0&&(<i class="icon iconfont icon-bell"></i>)} {hasTitle &&(props.level>=0&&(<i class="iconfont icon-arrow-right trigger"></i>)) \|\| !hasTitle &&(props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>))} <span v-show={hasTitle \|\| (!hasTitle && props.level > 0)} class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/ {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } /} </li> ); } } export default SubMenu; import Trigger from './trigger' import {getOffset,getDefaultTarget} from '@main/utils' import {filterEmpty} from '@main/utils/props' import PopMenu from './popMenu' const SubMenu = { props:{ eventKey:{ type:String }, mode:{ type:String }, level:{ type:Number }, hasTitle:{ type:Boolean }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, mounted(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; if(!subMenuDom.dataWidth){ subMenuDom.dataWidth=subMenuDom.offsetWidth; subMenuDom.style.width = '0'; } if(!subMenuDom.dataHeight){ subMenuDom.dataHeight=subMenuDom.offsetHeight+1; } }, methods:{ setPotion(){ let me=this; let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); let subStyle = { left: me.level==0?rect.left:rect.left+rect.width, top: me.level==0?rect.top+rect.height-1:rect.top, width: rect.width, height: rect.height } return subStyle; }, show(){ let me=this; if(me.level!=0){ me.parent.show&&me.parent.show(); } let p = me.setPotion(), h = document.documentElement.offsetHeight, w = document.documentElement.offsetWidth, subMenuDom = me.$refs['subMenus'].$el.firstElementChild; let sh = subMenuDom.offsetHeight+1, sw = subMenuDom.offsetWidth; sh = sh>h?h:sh; if(subMenuDom.dataWidth){ sw=subMenuDom.dataWidth; } if(subMenuDom.dataHeight){ sh=subMenuDom.dataHeight; } if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; // subMenuDom.style.left = p.width + sw + 'px'; subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px'; }else{ // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; subMenuDom.style.left = p.width + 'px'; subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-p.height)+'px'; } // subMenuDom.style.left = 171 + 'px'; // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px'; // subMenuDom.style.top = (p.top-36) + 'px'; subMenuDom.style.opacity = '1'; subMenuDom.style.height = sh+'px'; subMenuDom.style.width = sw+'px'; let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']1; subMenuDom.style.zIndex=zIndex+1; // me.$set(me,'subStyle',{display:'block',...p}); // me.subStyle.display = 'block'; me.isActive =true; }, hide(){ let me=this; let subMenuDom = me.$refs['subMenus'].$el.firstElementChild; subMenuDom.style.width = '0'; // me.subStyle.display = 'none'; me.isActive = false; }, hideParent(){ let me=this; if(me.level!=0){ me.parent.hide&&me.parent.hideParent(); } this.hide(); }, handleTitleMouseEnter(evt){ this.show(); }, handleTitleMouseLeave(evt){ this.hide(); }, handleSubMouseEnter(){ this.show(); }, handleSubMouseLeave(){ this.hideParent(); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, hasTitle:props.hasTitle, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-Smenus-sub']:1, ['pl-Smenus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const hasTitle = props.hasTitle; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-Smenus-item']:1, ['pl-Smenus-itemSeld']:isActive, ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap }, style:{ ['wdith']: hasTitle?'140px':'48px' } } const titleProps={ attrs:{ title:this.$slots.title[0].text }, on:{ mouseenter:this.handleTitleMouseEnter, mouseleave:this.handleTitleMouseLeave } } /* {isInlineMode && children} {!isInlineMode && ( <Trigger> {children} </Trigger>)} / /* * 菜单太多的问题 * 子菜单独立渲染添加滚动条 / return ( <li {...nodeProps} > <div ref="domMenuTitle" class="title" {...titleProps}> {props.level==0&&(<i class="icon iconfont icon-bell"></i>)} {hasTitle &&(props.level>=0&&(<i class="iconfont icon-arrow-right trigger"></i>)) \|\| !hasTitle &&(props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>))} <span v-show={hasTitle \|\| (!hasTitle && props.level > 0)} class='txt'>{this.$slots.title}</span> </div> <Trigger ref="subMenus">{children}</Trigger> {/ {props.level==0&&( <Trigger> {children} </Trigger>)} { props.level>0&&children } */} </li> ); } } export default SubMenu;

Ignore Space Show notes View

project/hivuiMain/views/layout/components/Smenus/subMenu.jsx

import Trigger from './trigger'
import {getOffset,getDefaultTarget} from '@main/utils'
import {filterEmpty} from '@main/utils/props'
import PopMenu from './popMenu'
const SubMenu = {
    props:{
        eventKey:{
            type:String
        },
        mode:{
            type:String
        },
        level:{
            type:Number
        },
        hasTitle:{
            type:Boolean
        },
        parent: {
            type: Object,
            default: null
        }
    },
    data(){
        return{
            subStyle:{
                left:0,
                top:0,
                display:'none'
            },
            isActive:false,
        }        
    }, 
    mounted(){ 
        let me=this; 
        let subMenuDom = me.$refs['subMenus'].$el.firstElementChild;
        let h = document.documentElement.offsetHeight;
        if(!subMenuDom.dataWidth){
            subMenuDom.dataWidth=subMenuDom.offsetWidth;
            subMenuDom.style.width = '0'; 
        }
        if(!subMenuDom.dataHeight){
            subMenuDom.dataHeight=(subMenuDom.offsetHeight>h?h:subMenuDom.offsetHeight)+1;
        }
    },
    methods:{
        setPotion(){
            let me=this;
            let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); 
            let subStyle = {
                left: me.level==0?rect.left:rect.left+rect.width,
                top: me.level==0?rect.top+rect.height-1:rect.top,
                width: rect.width,
                height: rect.height
            }
            return subStyle;
        },
        show(){
            let me=this; 
            if(me.level!=0){
                me.parent.show&&me.parent.show();
            }
            let p = me.setPotion(),     
                h = document.documentElement.offsetHeight,
                w = document.documentElement.offsetWidth,    
                subMenuDom = me.$refs['subMenus'].$el.firstElementChild;
            let sh = subMenuDom.offsetHeight,
                sw = subMenuDom.offsetWidth;
            sh = sh>h?h:sh;
            if(subMenuDom.dataWidth){
                sw=subMenuDom.dataWidth;
            }
            if(subMenuDom.dataHeight){
                sh=subMenuDom.dataHeight;
            }
            if(me.level>0){
                subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
                // subMenuDom.style.left = p.width + sw + 'px';
                subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px';
            }else{
                // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
                subMenuDom.style.left = p.width + 'px';
                subMenuDom.style.top = (p.top-p.height+sh>h?h-sh:p.top-p.height)+'px';
            }
            // subMenuDom.style.left = 171 + 'px';
            // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px';
            // subMenuDom.style.top = (p.top-36) + 'px';
            
            subMenuDom.style.opacity = '1'; 
            subMenuDom.style.height = sh+'px'; 
            subMenuDom.style.width = sw+'px'; 
            let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1;
            subMenuDom.style.zIndex=zIndex+1;

// me.$set(me,'subStyle',{display:'block',...p}); 
            // me.subStyle.display = 'block'; 
            me.isActive =true;
        },
        hide(){
            let me=this;   
            let subMenuDom = me.$refs['subMenus'].$el.firstElementChild;
            subMenuDom.style.width = '0'; 
            // me.subStyle.display = 'none';
            me.isActive = false;
        },
        hideParent(){ 
            let me=this;     
            if(me.level!=0){
                me.parent.hide&&me.parent.hideParent();
            }
            this.hide();
        },
        handleTitleMouseEnter(evt){ 
            this.show();
        },
        handleTitleMouseLeave(evt){
            this.hide();
        },
        handleSubMouseEnter(){
            this.show();
        },
        handleSubMouseLeave(){           
            this.hideParent();
        },
        renderChildren(children){
            let {...props} = this.$props;
            const {subStyle,isActive} = this;
            let popMenuProps={
                props:{
                    ...props,
                    level:props.level+1,
                    hasTitle:props.hasTitle,
                    children:children,
                    parent:this
                },
                style:{
                    // ...subStyle,                
                },
                class:{
                    ['pl-Smenus-sub']:1,
                    ['pl-Smenus-pop']:1,
                },
                on:{
                    mouseenter:this.handleSubMouseEnter,
                    mouseleave:this.handleSubMouseLeave
                }
            }
            return (
                <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu>
            )
        }
    },
    render(h) {
        const props = this.$props;
        const hasTitle = props.hasTitle;
        const {subStyle,isActive} = this;
        const isInlineMode = props.mode === 'inline';        
        const children = this.renderChildren(filterEmpty(this.$slots.default));
        const nodeProps ={
            class:{
                ['pl-Smenus-item']:1,
                ['pl-Smenus-itemSeld']:isActive,
                ['pl-Smenus-wordwrap']:window.__sysConfig.isMenuWordwrap
            },
            style:{
                ['wdith']: hasTitle?'140px':'48px'
            }
        }
        const titleProps={
            attrs:{
                title:this.$slots.title[0].text
            },
            on:{
                mouseenter:this.handleTitleMouseEnter,
                mouseleave:this.handleTitleMouseLeave
            }
        } 
        /*                     
            {isInlineMode && children}
            {!isInlineMode && (
            <Trigger>
                {children}
            </Trigger>)}
        */
       /**
        * 菜单太多的问题
        * 子菜单独立渲染 添加滚动条
        */

return (
            <li {...nodeProps} >
                <div ref="domMenuTitle" class="title" {...titleProps}>
                    {props.level==0&&(<i class="icon iconfont icon-bell"></i>)}
                    {hasTitle &&(props.level>=0&&(<i class="iconfont icon-arrow-right trigger"></i>))
                    || !hasTitle &&(props.level>0&&(<i class="iconfont icon-arrow-right trigger"></i>))}
                    <span v-show={hasTitle || (!hasTitle && props.level > 0)} class='txt'>{this.$slots.title}</span>
                </div>
                <Trigger ref="subMenus">{children}</Trigger>
                {/* {props.level==0&&(
                    <Trigger>
                        {children}
                    </Trigger>)}
                {
                    props.level>0&&children
                } */}
            </li>
        );
    }
}
export default SubMenu;

import Trigger from './trigger'
import {getOffset,getDefaultTarget} from '@main/utils'
import {filterEmpty} from '@main/utils/props'
import PopMenu from './popMenu'
const SubMenu = {
    props:{
        eventKey:{
            type:String
        },
        mode:{
            type:String
        },
        level:{
            type:Number
        },
        hasTitle:{
            type:Boolean
        },
        parent: {
            type: Object,
            default: null
        }
    },
    data(){
        return{
            subStyle:{
                left:0,
                top:0,
                display:'none'
            },
            isActive:false,
        }        
    }, 
    mounted(){ 
        let me=this; 
        let subMenuDom = me.$refs['subMenus'].$el.firstElementChild;
        if(!subMenuDom.dataWidth){
            subMenuDom.dataWidth=subMenuDom.offsetWidth;
            subMenuDom.style.width = '0'; 
        }
        if(!subMenuDom.dataHeight){
            subMenuDom.dataHeight=subMenuDom.offsetHeight+1;
        }
    },
    methods:{
        setPotion(){
            let me=this;
            let rect = getOffset(me.$refs['domMenuTitle'],getDefaultTarget()); 
            let subStyle = {
                left: me.level==0?rect.left:rect.left+rect.width,
                top: me.level==0?rect.top+rect.height-1:rect.top,
                width: rect.width,
                height: rect.height
            }
            return subStyle;
        },
        show(){
            let me=this; 
            if(me.level!=0){
                me.parent.show&&me.parent.show();
            }
            let p = me.setPotion(),     
                h = document.documentElement.offsetHeight,
                w = document.documentElement.offsetWidth,    
                subMenuDom = me.$refs['subMenus'].$el.firstElementChild;
            let sh = subMenuDom.offsetHeight+1,
                sw = subMenuDom.offsetWidth;
            sh = sh>h?h:sh;
            if(subMenuDom.dataWidth){
                sw=subMenuDom.dataWidth;
            }
            if(subMenuDom.dataHeight){
                sh=subMenuDom.dataHeight;
            }
            if(me.level>0){
                subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
                // subMenuDom.style.left = p.width + sw + 'px';
                subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px';
            }else{
                // subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
                subMenuDom.style.left = p.width + 'px';
                subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-p.height)+'px';
            }
            // subMenuDom.style.left = 171 + 'px';
            // subMenuDom.style.top = (p.top+sh>h?h-sh:p.top-36)+'px';
            // subMenuDom.style.top = (p.top-36) + 'px';
            
            subMenuDom.style.opacity = '1'; 
            subMenuDom.style.height = sh+'px'; 
            subMenuDom.style.width = sw+'px'; 
            let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1;
            subMenuDom.style.zIndex=zIndex+1;

Show line notes below