@中文描述:await tab关闭 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述:await tab关闭 @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent e60bc13 commit 1e1ad3cf0bf8e12a73045a60d310c56dae7e6e8e 20278 authored on 23 Dec

Showing 1 changed file

Ignore Space Show notes View project/hivuiMain/components/tabpanel/tabNav.jsx
import vueContextMenu from "@main/components/contextMenu"; // import screenfull from 'screenfull' function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop }, hasContextMenu:{ type:Boolean, default:true } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null, show:true,//用于强制刷新 } }, watch:{ panels(){ this.show=false; this.$nextTick(()=>{ this.show = true;//用于强制刷新 }); } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+5)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, async onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel); }, onContextMenu(panel,index,e) { if(this.hasContextMenu==false){ return; } e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh(e) { let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){ return; } panel.reload(); // let ifms = panel.$el.querySelectorAll('iframe'); // for(let i=ifms.length-1;i>=0;i--){ // ifms[i].contentWindow.window.location.reload(); // } }, async handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); }, handleFullScreen(){ // this.FullCreeen(document.documentElement); this.$emit('onFullScreen') }, handleBlankPage(){ let panel = this.panels[this.curContextMenuIndex]; panel.$listeners&&panel.$listeners.onBlankPage&&panel.$listeners.onBlankPage(); }, FullCreeen(element) { // let el = element; // let rfs = // el.requestFullScreen \|\| // el.webkitRequestFullScreen \|\| // el.mozRequestFullScreen \|\| // el.msRequestFullScreen; // // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。 // // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式， // // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。 // if (typeof rfs != "undefined" && rfs) { // rfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } screenfull.toggle() }, outFullCreeen(element){ // let el = element; // let cfs = el.cancelFullScreen \|\| el.webkitCancelFullScreen \|\| // el.mozCancelFullScreen \|\| el.exitFullScreen; // if (typeof cfs != "undefined" && cfs) { // cfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } }, }, render(h){ let { onClose, onActive, onContextMenu, hasContextMenu, show }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) const title = panel.title; return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span> {(panel.close===""\|\|panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: this.$t('hivuiMain_tab_ctxmenu_refresh'), iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: this.$t('hivuiMain_tab_ctxmenu_close'), iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeleft'), iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeright'), iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeother'), iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeall'), iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, { title: this.$t('hivuiMain_tab_ctxmenu_fullscreen'), iconClass: 'icon-quanping', handler: this.handleFullScreen, }, { title: this.$t('hivuiMain_tab_ctxmenu_blankPage'), iconClass: 'icon-xinbiaoqianye', handler: this.handleBlankPage, }, ] } }; return ( <div> <ul>{show?tabs:''}</ul> { hasContextMenu&&( <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> ) } </div> ) }, updated(){ this.$parent.resize(); } } import vueContextMenu from "@main/components/contextMenu"; // import screenfull from 'screenfull' function noop() {} export default { props:{ panels:Array, onTabClick: { type: Function, default: noop }, onTabRemove: { type: Function, default: noop }, onTabCloseAll: { type: Function, default: noop }, hasContextMenu:{ type:Boolean, default:true } }, data(){ return { curContextMenuName:'',//右击tab curContextMenuIndex:null, show:true,//用于强制刷新 } }, watch:{ panels(){ this.show=false; this.$nextTick(()=>{ this.show = true;//用于强制刷新 }); } }, methods:{ resize(){ let tabWidth=0; let children = this.$el.querySelectorAll('li'); Array.prototype.map.call(children, function (el, index, list) { let rct = el.getBoundingClientRect(); tabWidth += rct.width; }); this.$el.style.width = (tabWidth+5)+'px'; let id = this.$parent.currentName; if (this.$refs[id] == null) return; let scrollLeft = this.$refs[id].offsetLeft, scrollArea = this.$refs[id].parentNode.parentNode.parentNode; if (scrollArea.offsetWidth < scrollLeft) { scrollArea.scrollLeft = scrollLeft; } else if (scrollArea.scrollLeft > scrollLeft) { scrollArea.scrollLeft = scrollLeft; } }, onClose(panel,e){ e.stopPropagation(); if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, onActive(panel,evt){ panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt) this.$emit('onTabChange',panel); }, onContextMenu(panel,index,e) { if(this.hasContextMenu==false){ return; } e.preventDefault() this.curContextMenuName = panel.name; this.curContextMenuIndex = index, this.$refs['cmp-tabContextMenu'].open(e); }, handleContextMenuRefresh(e) { let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){ return; } panel.reload(); // let ifms = panel.$el.querySelectorAll('iframe'); // for(let i=ifms.length-1;i>=0;i--){ // ifms[i].contentWindow.window.location.reload(); // } }, handleContextMenuClose(e) { // e.stopPropagation(); let panel = this.panels[this.curContextMenuIndex]; if(!panel){return} if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){ return; } this.$emit('onTabClose',panel.name); }, handleContextMenuCloseAll(e) { this.$emit('onTabCloseAll'); }, handleContextMenuCloseRt() { this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseLt() { this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex); }, handleContextMenuCloseOt() { this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex); }, handleFullScreen(){ // this.FullCreeen(document.documentElement); this.$emit('onFullScreen') }, handleBlankPage(){ let panel = this.panels[this.curContextMenuIndex]; panel.$listeners&&panel.$listeners.onBlankPage&&panel.$listeners.onBlankPage(); }, FullCreeen(element) { // let el = element; // let rfs = // el.requestFullScreen \|\| // el.webkitRequestFullScreen \|\| // el.mozRequestFullScreen \|\| // el.msRequestFullScreen; // // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。 // // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式， // // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。 // if (typeof rfs != "undefined" && rfs) { // rfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } screenfull.toggle() }, outFullCreeen(element){ // let el = element; // let cfs = el.cancelFullScreen \|\| el.webkitCancelFullScreen \|\| // el.mozCancelFullScreen \|\| el.exitFullScreen; // if (typeof cfs != "undefined" && cfs) { // cfs.call(el); // } else if (typeof window.ActiveXObject != "undefined") { // let wscript = new ActiveXObject("WScript.Shell"); // if (wscript != null) { // wscript.SendKeys("{F11}"); // } // } }, }, render(h){ let { onClose, onActive, onContextMenu, hasContextMenu, show }=this; let tabs = this._l(this.panels,(panel,index)=>{ const nodeProps = { class:{ ['pl-tabs-item']:1, ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName }, attrs:{ id:'tab_'+panel.name } }; const closeTpl = ( <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i> ) const title = panel.title; return ( <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}> <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}> <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span> {(panel.close===""\|\|panel.close===true)&&closeTpl} </div> </li> ) }); const ctxMenuProp = { props: { ['menu-items']: [ { title: this.$t('hivuiMain_tab_ctxmenu_refresh'), iconClass: 'icon-refresh', handler: this.handleContextMenuRefresh, }, { title: this.$t('hivuiMain_tab_ctxmenu_close'), iconClass: 'icon-close-circle', handler: this.handleContextMenuClose, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeleft'), iconClass: 'icon-arrow-leftMore-circle', handler: this.handleContextMenuCloseLt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeright'), iconClass: 'icon-arrow-rightMore-circle', handler: this.handleContextMenuCloseRt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeother'), iconClass: 'icon-closeOther', handler: this.handleContextMenuCloseOt, }, { title: this.$t('hivuiMain_tab_ctxmenu_closeall'), iconClass: 'icon-closeAll', handler: this.handleContextMenuCloseAll, }, { title: this.$t('hivuiMain_tab_ctxmenu_fullscreen'), iconClass: 'icon-quanping', handler: this.handleFullScreen, }, { title: this.$t('hivuiMain_tab_ctxmenu_blankPage'), iconClass: 'icon-xinbiaoqianye', handler: this.handleBlankPage, }, ] } }; return ( <div> <ul>{show?tabs:''}</ul> { hasContextMenu&&( <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu> ) } </div> ) }, updated(){ this.$parent.resize(); } }

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/tabNav.jsx

import vueContextMenu from "@main/components/contextMenu";
// import screenfull from 'screenfull'
 function noop() {}
export default {
    props:{
        panels:Array,
        onTabClick: {
        type: Function,
        default: noop
      },
      onTabRemove: {
        type: Function,
        default: noop
      },
      onTabCloseAll: {
        type: Function,
        default: noop
      },
        hasContextMenu:{
            type:Boolean,
            default:true
        }
    },
    data(){
        return {
            curContextMenuName:'',//右击tab
            curContextMenuIndex:null,
            show:true,//用于强制刷新
        }
    },
    watch:{
        panels(){
            this.show=false;
            this.$nextTick(()=>{
                this.show = true;//用于强制刷新
            });
        }
    },
    methods:{
        resize(){
            let tabWidth=0;
            let children = this.$el.querySelectorAll('li');
            Array.prototype.map.call(children, function (el, index, list) {
                let rct = el.getBoundingClientRect();        
                tabWidth += rct.width;
            });
            this.$el.style.width = (tabWidth+5)+'px';

let id = this.$parent.currentName;
            if (this.$refs[id] == null) return;
                let scrollLeft = this.$refs[id].offsetLeft,
                scrollArea = this.$refs[id].parentNode.parentNode.parentNode;
            if (scrollArea.offsetWidth < scrollLeft) {
                scrollArea.scrollLeft = scrollLeft;
            } else if (scrollArea.scrollLeft > scrollLeft) {
                scrollArea.scrollLeft = scrollLeft;
            }

},
        async onClose(panel,e){
            e.stopPropagation();
            if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){
                return;
            }
            this.$emit('onTabClose',panel.name);
        },
        onActive(panel,evt){
            panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt)
            this.$emit('onTabChange',panel);
        },
        onContextMenu(panel,index,e) {
            if(this.hasContextMenu==false){
                return;
            }
            e.preventDefault()
            this.curContextMenuName = panel.name;
            this.curContextMenuIndex = index,
            this.$refs['cmp-tabContextMenu'].open(e);
        },
        handleContextMenuRefresh(e) {
            let panel = this.panels[this.curContextMenuIndex];
            if(!panel){return}
            if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){
                return;
            }
            panel.reload();
            // let ifms = panel.$el.querySelectorAll('iframe');
            // for(let i=ifms.length-1;i>=0;i--){
            //     ifms[i].contentWindow.window.location.reload();
            // }
        },
        async handleContextMenuClose(e) {
            // e.stopPropagation();
            let panel = this.panels[this.curContextMenuIndex];            
            if(!panel){return}
            if(panel.$listeners&&panel.$listeners.onBeforeClose&&await panel.$listeners.onBeforeClose(panel,e)===false){
                return;
            }
            this.$emit('onTabClose',panel.name);
        },
        handleContextMenuCloseAll(e) {
            this.$emit('onTabCloseAll');
        },
        handleContextMenuCloseRt() {
            this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseLt() {
            this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseOt() {
            this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleFullScreen(){
            // this.FullCreeen(document.documentElement);
            this.$emit('onFullScreen')
        },
        handleBlankPage(){
            let panel = this.panels[this.curContextMenuIndex];
            panel.$listeners&&panel.$listeners.onBlankPage&&panel.$listeners.onBlankPage();
        },
        FullCreeen(element) {
            // let el = element;
            // let rfs =
            //     el.requestFullScreen ||
            //     el.webkitRequestFullScreen ||
            //     el.mozRequestFullScreen ||
            //     el.msRequestFullScreen;
            //     // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
            //     // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
            //     // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
            // if (typeof rfs != "undefined" && rfs) {
            //     rfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //     wscript.SendKeys("{F11}");
            //     }
            // }
            screenfull.toggle()
        },
        outFullCreeen(element){
            // let el = element;
            // let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            //     el.mozCancelFullScreen || el.exitFullScreen;
            // if (typeof cfs != "undefined" && cfs) { 
            //     cfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //         wscript.SendKeys("{F11}");
            //     }
            // }
        },
    },
    render(h){
        let {
            onClose,
            onActive,
            onContextMenu,
            hasContextMenu,
            show
        }=this;
        let tabs = this._l(this.panels,(panel,index)=>{           
            const nodeProps = {
                class:{                
                    ['pl-tabs-item']:1,
                    ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName
                },
                attrs:{
                    id:'tab_'+panel.name
                }
            };
            const closeTpl = (
                <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i>
            )  
            const title = panel.title; 
            return (
                <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}>
                    <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}>
                        <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span>
                        {(panel.close===""||panel.close===true)&&closeTpl}
                    </div>
                </li>
            )
        });
        const ctxMenuProp = {
            props: {
                ['menu-items']: [
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_refresh'),
                        iconClass: 'icon-refresh',
                        handler: this.handleContextMenuRefresh,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_close'),
                        iconClass: 'icon-close-circle',
                        handler: this.handleContextMenuClose,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeleft'),
                        iconClass: 'icon-arrow-leftMore-circle',
                        handler: this.handleContextMenuCloseLt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeright'),
                        iconClass: 'icon-arrow-rightMore-circle',
                        handler: this.handleContextMenuCloseRt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeother'),
                        iconClass: 'icon-closeOther',
                        handler: this.handleContextMenuCloseOt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeall'),
                        iconClass: 'icon-closeAll',
                        handler: this.handleContextMenuCloseAll,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_fullscreen'),
                        iconClass: 'icon-quanping',
                        handler: this.handleFullScreen,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_blankPage'),
                        iconClass: 'icon-xinbiaoqianye',
                        handler: this.handleBlankPage,
                    },
                ]
            }
        };
        return (
            <div>
                <ul>{show?tabs:''}</ul>
                {
                    hasContextMenu&&(
                        <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu>
                    )
                }                   
            </div>    
        )
    },
    updated(){
        this.$parent.resize();
    }
}

},
        onClose(panel,e){
            e.stopPropagation();
            if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){
                return;
            }
            this.$emit('onTabClose',panel.name);
        },
        onActive(panel,evt){
            panel.$listeners&&panel.$listeners.onSelected&&panel.$listeners.onSelected(panel,evt)
            this.$emit('onTabChange',panel);
        },
        onContextMenu(panel,index,e) {
            if(this.hasContextMenu==false){
                return;
            }
            e.preventDefault()
            this.curContextMenuName = panel.name;
            this.curContextMenuIndex = index,
            this.$refs['cmp-tabContextMenu'].open(e);
        },
        handleContextMenuRefresh(e) {
            let panel = this.panels[this.curContextMenuIndex];
            if(!panel){return}
            if(panel.$listeners&&panel.$listeners.onBeforeRefresh&&panel.$listeners.onBeforeRefresh(panel,e)===false){
                return;
            }
            panel.reload();
            // let ifms = panel.$el.querySelectorAll('iframe');
            // for(let i=ifms.length-1;i>=0;i--){
            //     ifms[i].contentWindow.window.location.reload();
            // }
        },
        handleContextMenuClose(e) {
            // e.stopPropagation();
            let panel = this.panels[this.curContextMenuIndex];            
            if(!panel){return}
            if(panel.$listeners&&panel.$listeners.onBeforeClose&&panel.$listeners.onBeforeClose(panel,e)===false){
                return;
            }
            this.$emit('onTabClose',panel.name);
        },
        handleContextMenuCloseAll(e) {
            this.$emit('onTabCloseAll');
        },
        handleContextMenuCloseRt() {
            this.$emit('onTabCloseRt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseLt() {
            this.$emit('onTabCloseLt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleContextMenuCloseOt() {
            this.$emit('onTabCloseOt',this.curContextMenuName,this.curContextMenuIndex);
        },
        handleFullScreen(){
            // this.FullCreeen(document.documentElement);
            this.$emit('onFullScreen')
        },
        handleBlankPage(){
            let panel = this.panels[this.curContextMenuIndex];
            panel.$listeners&&panel.$listeners.onBlankPage&&panel.$listeners.onBlankPage();
        },
        FullCreeen(element) {
            // let el = element;
            // let rfs =
            //     el.requestFullScreen ||
            //     el.webkitRequestFullScreen ||
            //     el.mozRequestFullScreen ||
            //     el.msRequestFullScreen;
            //     // Element.requestFullscreen() 此方法用于发出异步请求使元素进入全屏模式。
            //     // 调用此API并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，
            //     // document对象会收到一个fullscreenchange事件，通知调用者当前元素已经进入全屏模式。如果全屏请求不被许可，则会收到一个fullscreenerror事件。
            // if (typeof rfs != "undefined" && rfs) {
            //     rfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //     wscript.SendKeys("{F11}");
            //     }
            // }
            screenfull.toggle()
        },
        outFullCreeen(element){
            // let el = element;
            // let cfs = el.cancelFullScreen || el.webkitCancelFullScreen ||
            //     el.mozCancelFullScreen || el.exitFullScreen;
            // if (typeof cfs != "undefined" && cfs) { 
            //     cfs.call(el);
            // } else if (typeof window.ActiveXObject != "undefined") {
            //     let wscript = new ActiveXObject("WScript.Shell");
            //     if (wscript != null) {
            //         wscript.SendKeys("{F11}");
            //     }
            // }
        },
    },
    render(h){
        let {
            onClose,
            onActive,
            onContextMenu,
            hasContextMenu,
            show
        }=this;
        let tabs = this._l(this.panels,(panel,index)=>{           
            const nodeProps = {
                class:{                
                    ['pl-tabs-item']:1,
                    ['pl-tabs-itemSeld']:panel.name == this.$parent.currentName
                },
                attrs:{
                    id:'tab_'+panel.name
                }
            };
            const closeTpl = (
                <i class="pl-tabs-itemClose iconfont icon-close" on-click={(ev) => { onClose(panel, ev); }}></i>
            )  
            const title = panel.title; 
            return (
                <li ref={panel.name} on-contextmenu={(ev) => { onContextMenu(panel,index, ev); }}>
                    <div {...nodeProps} on-click={(ev) => {onActive(panel, ev); }}>
                        <span class="pl-tabs-itemTxt sys-tab-item-text">{title}</span>
                        {(panel.close===""||panel.close===true)&&closeTpl}
                    </div>
                </li>
            )
        });
        const ctxMenuProp = {
            props: {
                ['menu-items']: [
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_refresh'),
                        iconClass: 'icon-refresh',
                        handler: this.handleContextMenuRefresh,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_close'),
                        iconClass: 'icon-close-circle',
                        handler: this.handleContextMenuClose,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeleft'),
                        iconClass: 'icon-arrow-leftMore-circle',
                        handler: this.handleContextMenuCloseLt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeright'),
                        iconClass: 'icon-arrow-rightMore-circle',
                        handler: this.handleContextMenuCloseRt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeother'),
                        iconClass: 'icon-closeOther',
                        handler: this.handleContextMenuCloseOt,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_closeall'),
                        iconClass: 'icon-closeAll',
                        handler: this.handleContextMenuCloseAll,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_fullscreen'),
                        iconClass: 'icon-quanping',
                        handler: this.handleFullScreen,
                    },
                    {
                        title: this.$t('hivuiMain_tab_ctxmenu_blankPage'),
                        iconClass: 'icon-xinbiaoqianye',
                        handler: this.handleBlankPage,
                    },
                ]
            }
        };
        return (
            <div>
                <ul>{show?tabs:''}</ul>
                {
                    hasContextMenu&&(
                        <vueContextMenu ref="cmp-tabContextMenu" {...ctxMenuProp}></vueContextMenu>
                    )
                }                   
            </div>    
        )
    },
    updated(){
        this.$parent.resize();
    }
}

Show line notes below