菜单bug修改

08335 / hivui-platform-template

hivui平台项目模板

Browse code 菜单bug修改 master
1 parent 6c49f3a commit ef9171becd2b46ed9409960614c6047cd6fd4c92 20278 authored on 14 Mar 2022

Showing 2 changed files

Ignore Space Show notes View project/hivuiMain/utils/index.js
import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop \|\| 0; const clientLeft = docElem.clientLeft \|\| 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /** * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");��http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")��http://www.fdauto.com?userid=03870&bumen=aj; / export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /* * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); / export function getUrlValue(url, name) { var str = url \|\| window.location.search; if (str.indexOf("&" + name) != -1 \|\| str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /* * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); / export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl \|\| "about:blank"; } /5.0替换3.0菜单字段/ export function field5Change3(_arr){ /5.0字段替换3.0/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } if(!window._global){//正式环境 item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it) } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } //排查子节点是否全部不显示 function __filterHide(__data,total){ let count=0; for(let i=0;i<__data.length;i++){ if(__data[i].children&&__data[i].children.length>0){ if(!__filterHide(__data[i].children,__data[i].children.length)){ __data[i].isShow=0; count++; } }else{ if(!__data[i].isShow){ count++; } } } return count!=total; } let __result=isNotTop?(val[0]&&val[0].children):val; __filterHide(__result,__result.length); return __result; } import getScroll from './getScroll' export function getTargetRect(target) { return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 }; } export function getOffset(element, target) { const elemRect = element.getBoundingClientRect(); const targetRect = getTargetRect(target); const scrollTop = getScroll(target, true); const scrollLeft = getScroll(target, false); const docElem = window.document.body; const clientTop = docElem.clientTop \|\| 0; const clientLeft = docElem.clientLeft \|\| 0; return { top: elemRect.top - targetRect.top + scrollTop - clientTop, left: elemRect.left - targetRect.left + scrollLeft - clientLeft, width: elemRect.width, height: elemRect.height, }; } export function getDefaultTarget() { return typeof window !== 'undefined' ? window : null; } /* * @method setUrlValue * @description 设置地址栏参数值 * @param url * @param pName * @param pValue * * @example: urlAppend("http://www.fdauto.com","userid=03870");��http://www.fdauto.com?userid=03870;1` * urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")��http://www.fdauto.com?userid=03870&bumen=aj; / export function setUrlValue(url, key, value) { var returnUrl = '' if (url.indexOf('?') == -1) { returnUrl += url + '?' + key + '=' + value } else { if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) { returnUrl += url + '&' + key + '=' + value } else { var isDone = false var startIndex = 0 var endIndex = url.length - 1 var parm = '?' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } isDone = true break } } if (!isDone) { parm = '&' + key + '=' for (var i = 0; i < url.length; i++) { if (url.substr(i, parm.length) == parm) { startIndex = i + parm.length for (var j = startIndex; j < url.length; j++) { if (url[j] == '&') { endIndex = j break } else if (j == url.length - 1) { endIndex = url.length } } break } } } var parmKeyValue = parm + url.substring(startIndex, endIndex) returnUrl = url.replace(parmKeyValue, parm + value) } } return returnUrl } /* * @method getUrlValue * @description 获取地址栏参数值 * @param name * string * @param url * string * @example: getUrlValue("p","http://www.baidu.com?p=5"); / export function getUrlValue(url, name) { var str = url \|\| window.location.search; if (str.indexOf("&" + name) != -1 \|\| str.indexOf("?" + name) != -1) { var pos_start = "" if (str.indexOf("?" + name) > -1) pos_start = str.indexOf("?" + name) + name.length + 2; else pos_start = str.indexOf("&" + name) + name.length + 2; var pos_end = str.indexOf("&", pos_start); if (pos_end == -1) { return str.substring(pos_start); } else { return str.substring(pos_start, pos_end) } } else { return ""; } } export function getUrlSearch(url) { var name, value; var str = url; //取得整个地址栏 var num = str.indexOf("?") str = str.substr(num + 1); //取得所有参数 stringvar.substr(start [, length ] var arr = str.split("&"); //各个参数放到数组里 var search ={}; for (var i = 0; i < arr.length; i++) { num = arr[i].indexOf("="); if (num > 0) { name = arr[i].substring(0, num); value = arr[i].substr(num + 1); search[name] = value; } } return search; } /* * var str='这是一个测试的字符串：{0} {1}'.format('Hello','world'); * var str='这是一个测试的字符串：{str0} {str1}'.format({str0:'Hello',str1:'world'}); / export function strFormat(str, args) { var result = str; if (arguments.length > 0) { if (arguments.length == 2 && typeof (args) == "object") { for (var key in args) { if (args[key] != undefined) { var reg = new RegExp("({" + key + "})", "g"); result = result.replace(reg, args[key]); } } } else { for (var i = 1; i < arguments.length; i++) { if (arguments[i] != undefined) { var reg = new RegExp("({)" + (i - 1) + "(})", "g"); result = result.replace(reg, arguments[i]); } } } } return result; } export function closeWindow(errorUrl){ if (document.all) { if (window.location.pathname == window.parent.location.pathname) { window.opener = null; window.open('', '_top'); window.top.close(); } } else { window.close(); } window.location.href = errorUrl \|\| "about:blank"; } /5.0替换3.0菜单字段/ export function field5Change3(_arr){ /5.0字段替换3.0*/ let fieldConversion={ isActive:"fisactive", isOffline:"fisoffline", isShow:"fshow", name:"fresname", orderIndex:"forder", parentId:"frespguid", resId:"fresguid", resUrl:"fresurl", type:"frestype", }; _arr.map(item=>{ if(item.children&&item.children.length>0){ field5Change3(item.children); } for(let i in fieldConversion){ if(typeof(item[fieldConversion[i]])!="undefined"){ item[i]=item[fieldConversion[i]]; delete item[fieldConversion[i]]; } } if(!window._global){//正式环境 item.resUrl=window.HIVUI_SETTING.serverName+item.resUrl; } return item; }); return _arr; } export function turnMenuTree(data,isNotTop) {//data:平级数据;isNotTop:输出数据是否不包含根节点 let map = {}; let val = []; //生成数据对象集合 data.forEach(it=>{ map[it.resId] = it; //resId为每个节点的id if(it.parentId==-1&&it.type=="root"){ isNotTop=true; } }); //生成结果集 data.forEach(it=>{ let parent = map[it.parentId]; //parentId为父节点的id if(parent){ if(!Array.isArray(parent.children)) parent.children = []; parent.children.push(it); }else{ val.push(it) } }); val=__sort(val); //排序 function __sort(__data,orderField="orderIndex"){ let zeroArr=__data.filter(item=>{ return item[orderField]==0; }); let normalArr=__data.filter(item=>{ return item[orderField]!=0; }); normalArr.sort((a,b)=>{ var value1 = a[orderField]; var value2 = b[orderField]; return value1 - value2; }); __data=normalArr.concat(zeroArr); for(let i of __data){ if(i.children&&i.children.length>0){ i.children=__sort(i.children); } } return __data; } return isNotTop?(val[0]&&val[0].children):val; }

Ignore Space Show notes View

project/hivuiMain/utils/index.js

import getScroll from './getScroll'
export function getTargetRect(target) {
    return target !== window ? target.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 };
}
export function getOffset(element, target) {
    const elemRect = element.getBoundingClientRect();
    const targetRect = getTargetRect(target);

const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

return {
        top: elemRect.top - targetRect.top + scrollTop - clientTop,
        left: elemRect.left - targetRect.left + scrollLeft - clientLeft,
        width: elemRect.width,
        height: elemRect.height,
    };
}

export function getDefaultTarget() {
    return typeof window !== 'undefined' ? window : null;
}

/**
 * @method setUrlValue
 * @description 设置地址栏参数值
 * @param url
 * @param pName
 * @param pValue
 * 
 * @example: urlAppend("http://www.fdauto.com","userid=03870");�����http://www.fdauto.com?userid=03870;1`
 *           urlAppend("http://www.fdauto.com?userid=03870","bumen=aj")�����http://www.fdauto.com?userid=03870&bumen=aj;
 */

export function setUrlValue(url, key, value) {
    var returnUrl = ''
    if (url.indexOf('?') == -1) {
        returnUrl += url + '?' + key + '=' + value
    } else {
        if (url.indexOf('?' + key + '=') == -1 && url.indexOf('&' + key + '=') == -1) {
            returnUrl += url + '&' + key + '=' + value
        } else {
            var isDone = false
            var startIndex = 0
            var endIndex = url.length - 1
            var parm = '?' + key + '='
            for (var i = 0; i < url.length; i++) {
                if (url.substr(i, parm.length) == parm) {
                    startIndex = i + parm.length
                    for (var j = startIndex; j < url.length; j++) {
                        if (url[j] == '&') {
                            endIndex = j
                            break
                        } else if (j == url.length - 1) {
                            endIndex = url.length
                        }
                    }
                    isDone = true
                    break
                }
            }
            if (!isDone) {
                parm = '&' + key + '='
                for (var i = 0; i < url.length; i++) {
                    if (url.substr(i, parm.length) == parm) {
                        startIndex = i + parm.length
                        for (var j = startIndex; j < url.length; j++) {
                            if (url[j] == '&') {
                                endIndex = j
                                break
                            } else if (j == url.length - 1) {
                                endIndex = url.length
                            }
                        }
                        break
                    }
                }
            }
            var parmKeyValue = parm + url.substring(startIndex, endIndex)
            returnUrl = url.replace(parmKeyValue, parm + value)
        }
    }
    return returnUrl
}
/**
 * @method getUrlValue
 * @description 获取地址栏参数值
 * @param name
 *            string
 * @param url
 *            string
 * @example: getUrlValue("p","http://www.baidu.com?p=5"); 
 */
export function getUrlValue(url, name) {

export function closeWindow(errorUrl){
    if (document.all) {
        if (window.location.pathname == window.parent.location.pathname) {
            window.opener = null;
            window.open('', '_top');
            window.top.close();
        }
    } else {
        window.close();
    }

const scrollTop = getScroll(target, true);
    const scrollLeft = getScroll(target, false);

const docElem = window.document.body;
    const clientTop = docElem.clientTop || 0;
    const clientLeft = docElem.clientLeft || 0;

export function getDefaultTarget() {
    return typeof window !== 'undefined' ? window : null;
}

Ignore Space Show notes View project/hivuiMain/views/layout/components/menus/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 }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, 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 } 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; subMenuDom.style.display = 'block'; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>(h-p.top)?(h-p.top):sh; if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?p.left-p.width-sw:p.left-10)+'px'; }else{ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; } subMenuDom.style.top = p.top+'px'; subMenuDom.style.height = sh+'px'; subMenuDom.style.display = 'block'; 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.display = 'none'; // 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(); this.$emit('mouseenter'); }, handleSubMouseLeave(){ this.hideParent(); this.$emit('mouseleave'); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-menus-sub']:1, ['pl-menus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-menus-item']:1, ['pl-menus-itemSeld']:isActive } } 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="iconfont icon-arrow-right trigger"></i>)} <span 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 }, parent: { type: Object, default: null } }, data(){ return{ subStyle:{ left:0, top:0, display:'none' }, isActive:false, } }, 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 } 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; subMenuDom.style.display = 'block'; let sh = subMenuDom.offsetHeight, sw = subMenuDom.offsetWidth; sh = sh>h?h:sh; if(me.level>0){ subMenuDom.style.left = (p.left+sw>w?p.left-p.width-sw:p.left-10)+'px'; }else{ subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px'; } subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px'; subMenuDom.style.height = sh+'px'; subMenuDom.style.display = 'block'; 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.display = 'none'; // 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(); this.$emit('mouseenter'); }, handleSubMouseLeave(){ this.hideParent(); this.$emit('mouseleave'); }, renderChildren(children){ let {...props} = this.$props; const {subStyle,isActive} = this; let popMenuProps={ props:{ ...props, level:props.level+1, children:children, parent:this }, style:{ // ...subStyle, }, class:{ ['pl-menus-sub']:1, ['pl-menus-pop']:1, }, on:{ mouseenter:this.handleSubMouseEnter, mouseleave:this.handleSubMouseLeave } } return ( <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu> ) } }, render(h) { const props = this.$props; const {subStyle,isActive} = this; const isInlineMode = props.mode === 'inline'; const children = this.renderChildren(filterEmpty(this.$slots.default)); const nodeProps ={ class:{ ['pl-menus-item']:1, ['pl-menus-itemSeld']:isActive } } 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="iconfont icon-arrow-right trigger"></i>)} <span 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/menus/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
        },
        parent: {
            type: Object,
            default: null
        }
    },
    data(){
        return{
            subStyle:{
                left:0,
                top:0,
                display:'none'
            },
            isActive:false,
        }        
    },
    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
            }
            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;
            subMenuDom.style.display = 'block'; 
            let sh = subMenuDom.offsetHeight,
                sw = subMenuDom.offsetWidth;
            sh = sh>(h-p.top)?(h-p.top):sh;
            if(me.level>0){
                subMenuDom.style.left = (p.left+sw>w?p.left-p.width-sw:p.left-10)+'px';
            }else{
                subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
            }
            subMenuDom.style.top = p.top+'px';
            subMenuDom.style.height = sh+'px'; 
            subMenuDom.style.display = 'block'; 
            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.display = 'none'; 
            // 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();
            this.$emit('mouseenter');
        },
        handleSubMouseLeave(){      
            this.hideParent();
            this.$emit('mouseleave');
        },
        renderChildren(children){
            let {...props} = this.$props;
            const {subStyle,isActive} = this;
            let popMenuProps={
                props:{
                    ...props,
                    level:props.level+1,
                    children:children,
                    parent:this
                },
                style:{
                    // ...subStyle,                
                },
                class:{
                    ['pl-menus-sub']:1,
                    ['pl-menus-pop']:1,
                },
                on:{
                    mouseenter:this.handleSubMouseEnter,
                    mouseleave:this.handleSubMouseLeave
                }
            }
            return (
                <PopMenu ref="domMenuSub" {...popMenuProps}></PopMenu>
            )
        }
    },
    render(h) {
        const props = this.$props;
        const {subStyle,isActive} = this;
        const isInlineMode = props.mode === 'inline';        
        const children = this.renderChildren(filterEmpty(this.$slots.default));
        const nodeProps ={
            class:{
                ['pl-menus-item']:1,
                ['pl-menus-itemSeld']:isActive
            }
        }
        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="iconfont icon-arrow-right trigger"></i>)}
                    <span 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
        },
        parent: {
            type: Object,
            default: null
        }
    },
    data(){
        return{
            subStyle:{
                left:0,
                top:0,
                display:'none'
            },
            isActive:false,
        }        
    },
    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
            }
            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;
            subMenuDom.style.display = 'block'; 
            let sh = subMenuDom.offsetHeight,
                sw = subMenuDom.offsetWidth;
            sh = sh>h?h:sh;
            if(me.level>0){
                subMenuDom.style.left = (p.left+sw>w?p.left-p.width-sw:p.left-10)+'px';
            }else{
                subMenuDom.style.left = (p.left+sw>w?w-sw:p.left)+'px';
            }
            subMenuDom.style.top = (p.top+sh>h?h-sh:p.top)+'px';
            subMenuDom.style.height = sh+'px'; 
            subMenuDom.style.display = 'block'; 
            let zIndex = window.getComputedStyle(this.$el.parentNode,null)['z-index']*1;
            subMenuDom.style.zIndex=zIndex+1;

Show line notes below