@中文描述: 优化标签面板显示逻辑 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: 优化标签面板显示逻辑 @版本号: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 4aa2b59 commit b44168c42b68aab53b22d640c6182fd2e89b74ad ganyi authored 7 days ago

Showing 2 changed files

Ignore Space Show notes View project/hivuiMain/components/tabpanel/panel.vue
<template> <div class="pl-tabs-panel" :title="title" :style="tabStyle"> <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null\|\|this.url=='') } }, computed:{ tabStyle() { return { position: "absolute", width: "100%", top: this.active ? 0 : "-200%", left: 0, opacity: this.active ? 1 : 0, visibility: this.active ? "visible" : "hidden", }; }, active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl\|\|this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); //如果token不一致，替换掉然后重新载入 let urlToken=getUrlValue(ifm.contentWindow.location.href,"access_token"); let nowToken=getToken(); if(false&&!window._global&&urlToken&&nowToken&&(urlToken!=nowToken)){//正式环境 ifm.contentWindow.location=setUrlValue(decodeURIComponent(ifm.contentWindow.location.href),"access_token",nowToken); } ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""\|\|ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ //this.loaded=false;//右击刷新时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script> <template> <div class="pl-tabs-panel" :title="title" v-show="active" > <div class="pl-loading pl-loading-fixed" v-show="url&&!loaded" ref="dom-loader"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <iframe v-if="hasUrl" @load="handleIframeLoad" :name="'iframe'+name" ref="iframe"></iframe> <slot v-if="!hasUrl"></slot> </div> </template> <script> import { getUrlValue, setUrlValue,getUrlSearch } from "@main/utils"; import { getToken } from '@main/utils/auth' export default { name:'PTabpanel', props:{ close:[String,Number,Boolean], itemData:Object, title:{ type:String, default:"" }, name:{ type:[String,Number], default:"" }, url:{ type:[String], default:"" }, index:[String,Number] }, data(){ return { scrollTop: 0, loaded: false, hasUrl:!(this.url==null\|\|this.url=='') } }, computed:{ active(){ const active = this.$parent.currentName === this.name; return active; } }, watch:{ active(val){ let ifm = this.$refs["iframe"]; if(val){ this.setIframeSrc(); if (ifm&&ifm.contentDocument) { this.$nextTick(()=>{ //保持原有的滚动位置 ifm.contentDocument.documentElement.scrollTop=this.scrollTop; }); } }else{ if (ifm&&ifm.contentDocument) { //保持原有的滚动位置 this.scrollTop = ifm.contentDocument.documentElement.scrollTop; } } } }, updated() { this.$parent.$emit('tab-nav-update'); }, mounted(){ if(this.active){ // console.log('___________ mounted active ! setIframeSrc') this.setIframeSrc(); } }, beforeDestroy() { // this.offIframeScroll(); }, methods:{ setIframeSrc(){ let ifm = this.$refs['iframe']; if(!this.hasUrl\|\|this.loaded==true){ if (ifm&&ifm.contentDocument) { ifm.contentWindow.document.body.scrollTop = this.scrollTop; } return; } if(ifm&&this.url.indexOf("about:blank")<0){ this.loaded = false; ifm.setAttribute('src',this.url); }else{ this.loaded = true; } }, reload(){ let ifm = this.$refs['iframe']; this.loaded=false; // console.log(' reload this page :',ifm.src,ifm.contentWindow.window.location.href); //如果token不一致，替换掉然后重新载入 let urlToken=getUrlValue(ifm.contentWindow.location.href,"access_token"); let nowToken=getToken(); if(false&&!window._global&&urlToken&&nowToken&&(urlToken!=nowToken)){//正式环境 ifm.contentWindow.location=setUrlValue(decodeURIComponent(ifm.contentWindow.location.href),"access_token",nowToken); } ifm.contentWindow.location.reload(); }, handleIframeLoad(evt){ // if(this.active==false){ // //如果没有被激活，就不加载 // return; // } let ifm = this.$refs['iframe']; if(this.title==""&& ifm.contentWindow.document.title!=""){ this.$emit("update:title", ifm.contentWindow.document.title); } if(ifm.src!=''&&ifm.src!=="about:blank"){ this.loaded=true; }else{ if(ifm.contentWindow.document.body.innerHTML==""\|\|ifm.contentWindow.document.head.innerHTML==""){ this.loaded=false; }else{ this.loaded=true; } } if (ifm.contentDocument) { ifm.contentWindow.window.addEventListener('beforeunload',()=>{ //this.loaded=false;//右击刷新时进行加载状态 }); } this.loaded&&this.$emit('onIframeLoad',this,evt); }, } } </script>

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/panel.vue

if (ifm.contentDocument) { 
                ifm.contentWindow.window.addEventListener('beforeunload',()=>{
                    //this.loaded=false;//右击刷新 时进行加载状态
                });
            }

this.loaded&&this.$emit('onIframeLoad',this,evt);
        },
    }
}
</script>

this.loaded&&this.$emit('onIframeLoad',this,evt);
        },
    }
}
</script>

Ignore Space Show notes View project/hivuiMain/components/tabpanel/tabs.jsx
import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' import DrpMenus from './drpMenus' import LogoCont from "@main/components/logo"; const Tabs = { name: 'PTabs', props: { value: {}, hasMoreMenu:{ type:Boolean, default:true }, hasContextMenu:{ type:Boolean, default:true }, isSinglePage:{ type:Boolean, default:false }, }, watch: { value(value) { if(value==this.currentName){ return; } this.setCurrentName(value) }, }, inject:['showTab','hideTab'], data() { return { currentName: this.value \|\| this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, computed: { layout() { return window.localStorage.getItem("layout"); }, }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); this.$nextTick(r=>{ let panel = this.getItem(value); this.$emit('onActiveTab',panel); }); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; this.$set(this,'panels',panels) } } else if (this.panels.length !== 0) { this.$set(this,'panels',[]) } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] id:name, uid:name, name:name, tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); // console.log('height', this.$refs['domTabHead'].offsetHeight) // console.log('offsetHeight', this.$el.offsetHeight) //this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block"; this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; // console.log('main height', this.$refs['domTabBody'].style.height) let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step \|\| this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.handleScrollLtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step \|\| this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.handleScrollRtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(panel) { if(panel.name==this.currentName){ return; } this.setCurrentName(panel.name); }, handleTabClose(name) { this.closeItem(name); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let {hasMoreMenu,hasContextMenu}=this; let children = this.panels; let headStyle={ style:{ display: this.isSinglePage ? "none" : "block" } } let navData={ props:{ panels:children, hasContextMenu:hasContextMenu }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onFullScreen:this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, mouseleave:this.handleScrollLtMouseUp, }, title:this.$t('hivuiMain_tab_scroll_lt') }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, mouseleave:this.handleScrollRtMouseUp, }, title:this.$t('hivuiMain_tab_scroll_rt') }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus }, title:this.$t('hivuiMain_tab_scroll_more') }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { style: { position: "relative" }, on: { mouseout: this.showTab, mouseover: this.hideTab } }; const isConciseLayout = this.layout =='concise'; return ( <div class="pl-tabs"> <div class={isConciseLayout?'pl-tabs-hd concise':'pl-tabs-hd'} ref='domTabHead' {...headStyle}> { isConciseLayout&&( <div class="pl-tabs-logo"> <LogoCont logoType="tabLogo"></LogoCont> </div> ) } <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> { hasMoreMenu&&( <div class="item" ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> ) } </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}> {this.$slots.default} </div> </div> ) } } export default Tabs; import findIndex from 'lodash/findIndex' import Panel from './panel.vue' import TabNav from './tabNav.jsx' import DrpMenus from './drpMenus' import LogoCont from "@main/components/logo"; const Tabs = { name: 'PTabs', props: { value: {}, hasMoreMenu:{ type:Boolean, default:true }, hasContextMenu:{ type:Boolean, default:true }, isSinglePage:{ type:Boolean, default:false }, }, watch: { value(value) { if(value==this.currentName){ return; } this.setCurrentName(value) }, }, inject:['showTab','hideTab'], data() { return { currentName: this.value \|\| this.activeName, contextMenuKey: null, scrollStep: 115, showScroll: false, panels: [] } }, created() { this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true)); }, mounted() { this.calcPaneInstances(); window.addEventListener('resize',this.resize); }, updated() { this.calcPaneInstances(); }, beforeDestroy() { window.removeEventListener('resize',this.resize); }, computed: { layout() { return window.localStorage.getItem("layout"); }, }, methods: { setCurrentName(value) { this.currentName = value; //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变 this.$emit('input', value); this.$nextTick(r=>{ let panel = this.getItem(value); this.$emit('onActiveTab',panel); }); }, calcPaneInstances() { //收集插槽里头的组件实例，以重新渲染 if (this.$slots.default) { const panelslots = this.$slots.default.filter(vnode => vnode.tag && vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel'); // update indeed const panels = panelslots.map(({ componentInstance }) => componentInstance); const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index])); if (panelsChanged) { this.panels = panels; this.$set(this,'panels',panels) } } else if (this.panels.length !== 0) { this.$set(this,'panels',[]) } }, closeItem(key) { let me = this; me.$emit('onRemoveTab', key); me.resize(); }, closeCurItem() { this.closeItem(this.currentName); }, getItemIndex(name) { let index = findIndex(this.panels, item => { return item.name == name; }); return index; }, getItem(name) { let index = findIndex(this.panels, item => { return item.name == name; }); if (index > -1) { return this.panels[index]; } return null; }, getItemObj(name) { let panel = this.getItem(name); if (panel == null) return null; return { //.$refs['TabNavs'] id:name, uid:name, name:name, tabEl: this.$el.querySelector('#tab_'+name),//null tabPanelEl: panel.$el, tabPanelIframeEl: panel.$el.querySelector('iframe') }; }, getSeldItemObj() { return this.getItemObj(this.currentName); }, resize() { this.$refs['TabNavs'].resize(); // console.log('height', this.$refs['domTabHead'].offsetHeight) // console.log('offsetHeight', this.$el.offsetHeight) //this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block"; this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px'; // console.log('main height', this.$refs['domTabBody'].style.height) let tabScroll = this.$refs['domTabScroll']; this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth; }, handleShowDrpMenus(evt) { evt.stopPropagation(); const rects = evt.currentTarget.getClientRects()[0]; this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height); }, handleHideDrpMenus() { this.$refs['cmp-drpMenus'].hide(); }, handleMoreMenuClick(vm, event) { // this.activeKey = vm.$el.getAttribute('alt'); this.resize(); }, handleScrollLt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft - (step \|\| this.scrollStep); }, handleScrollLtMouseDown() { let me = this; me.handleScrollLtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollLt(10); }, 10); }, handleScrollLtMouseUp() { clearInterval(this.scrollPressTimer); }, handleScrollRt(step) { let el = this.$refs['domTabScroll']; el.scrollLeft = el.scrollLeft + (step \|\| this.scrollStep); }, handleScrollRtMouseDown() { let me = this; me.handleScrollRtMouseUp(); me.scrollPressTimer = setInterval(function () { me.handleScrollRt(10); }, 10); }, handleScrollRtMouseUp() { clearInterval(this.scrollPressTimer); }, handleTabChange(panel) { if(panel.name==this.currentName){ return; } this.setCurrentName(panel.name); }, handleTabClose(name) { this.closeItem(name); }, handleTabCloseAll(){ this.$emit('onRemoveAllTab'); this.resize(); }, handleTabCloseLt(name,index){ this.$emit('onRemoveLeft',name,index); this.resize(); }, handleTabCloseRt(name,index){ this.$emit('onRemoveRight',name,index); this.resize(); }, handleTabCloseOt(name,index){ this.$emit('onRemoveOther',name,index); this.resize(); }, handleFullScreen(){ this.$emit('onFullScreen') } }, render(h) { let {hasMoreMenu,hasContextMenu}=this; let children = this.panels; let headStyle={ style:{ display: this.isSinglePage ? "none" : "block" } } let navData={ props:{ panels:children, hasContextMenu:hasContextMenu }, on:{ onTabChange: this.handleTabChange, onTabClose: this.handleTabClose, onTabCloseAll: this.handleTabCloseAll, onTabCloseLt:this.handleTabCloseLt, onTabCloseRt:this.handleTabCloseRt, onTabCloseOt:this.handleTabCloseOt, onFullScreen:this.handleFullScreen }, ref:'domTabSrcollInner' }; let scrollLtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollLt, mousedown: this.handleScrollLtMouseDown, mouseup: this.handleScrollLtMouseUp, mouseleave:this.handleScrollLtMouseUp, }, title:this.$t('hivuiMain_tab_scroll_lt') }, scrollRtBtn = { style: { display: this.showScroll ? 'inline-block' : 'none' }, on: { //click:this.handleScrollRt, mousedown: this.handleScrollRtMouseDown, mouseup: this.handleScrollRtMouseUp, mouseleave:this.handleScrollRtMouseUp, }, title:this.$t('hivuiMain_tab_scroll_rt') }, moreBtn = { on: { mouseover: this.handleShowDrpMenus, mouseout: this.handleHideDrpMenus }, title:this.$t('hivuiMain_tab_scroll_more') }, drpMenus = { props: { children: children }, on: { click: this.handleMoreMenuClick, onTabChange: this.handleTabChange, onTabClose: this.handleTabClose } }, hideSty = { on: { mouseout: this.showTab, mouseover: this.hideTab } }; const isConciseLayout = this.layout =='concise'; return ( <div class="pl-tabs"> <div class={isConciseLayout?'pl-tabs-hd concise':'pl-tabs-hd'} ref='domTabHead' {...headStyle}> { isConciseLayout&&( <div class="pl-tabs-logo"> <LogoCont logoType="tabLogo"></LogoCont> </div> ) } <div class="pl-tabs-tool" ref='domTabTool'> <div class="item" ref='domTabScrollLt' {...scrollLtBtn}> <i class="iconfont icon-arrow-left"></i> </div> <div class="item" ref='domTabScrollRt' {...scrollRtBtn}> <i class="iconfont icon-arrow-right"></i> </div> { hasMoreMenu&&( <div class="item" ref='domTabScrollMore' {...moreBtn} > <i class="iconfont icon-arrow-down"></i> <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus> </div> ) } </div> <div class="pl-tabs-scroll" ref='domTabScroll'> <TabNav {...navData} ref='TabNavs'></TabNav> </div> </div> <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}> {this.$slots.default} </div> </div> ) } } export default Tabs;

Ignore Space Show notes View

project/hivuiMain/components/tabpanel/tabs.jsx

import findIndex from 'lodash/findIndex'
import Panel from './panel.vue'
import TabNav from './tabNav.jsx'
import DrpMenus from './drpMenus'
import LogoCont from "@main/components/logo";
const Tabs = {
    name: 'PTabs',
    props: {
        value: {},
        hasMoreMenu:{
            type:Boolean,
            default:true
        },
        hasContextMenu:{
            type:Boolean,
            default:true
        },
        isSinglePage:{
            type:Boolean,
            default:false
        },
    },
    watch: {
        value(value) {
            if(value==this.currentName){
                return;
            }
            this.setCurrentName(value)
        },
    },
    inject:['showTab','hideTab'],
    data() {
        return {
            currentName: this.value || this.activeName,
            contextMenuKey: null,
            scrollStep: 115,
            showScroll: false,
            panels: []
        }
    },
    created() {
        this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
    },
    mounted() {
        this.calcPaneInstances();
        window.addEventListener('resize',this.resize);
    },
    updated() {
        this.calcPaneInstances();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.resize);
    },
    computed: {
        layout() {
            return window.localStorage.getItem("layout");
        },
    },
    methods: {
        setCurrentName(value) {
            this.currentName = value;  
            //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变          
            this.$emit('input', value);
            this.$nextTick(r=>{
                let panel = this.getItem(value);
                this.$emit('onActiveTab',panel);
            });  
        },
        calcPaneInstances() {
            //收集插槽里头的组件实例，以重新渲染
            if (this.$slots.default) {
                const panelslots = this.$slots.default.filter(vnode => vnode.tag &&
                    vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel');
                // update indeed
                const panels = panelslots.map(({ componentInstance }) => componentInstance);
                const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index]));
                if (panelsChanged) {
                    this.panels = panels;
                    this.$set(this,'panels',panels)
                }
            } else if (this.panels.length !== 0) {
                this.$set(this,'panels',[])
            }
        },
        closeItem(key) {
            let me = this;
            me.$emit('onRemoveTab', key);
            me.resize();
        },
        closeCurItem() {
            this.closeItem(this.currentName);
        },
        getItemIndex(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            return index;
        },
        getItem(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            if (index > -1) {
                return this.panels[index];
            }
            return null;
        },
        getItemObj(name) {
            let panel = this.getItem(name);
            if (panel == null) return null; 
            return {   
                //.$refs['TabNavs']
                id:name,
                uid:name,
                name:name,
                tabEl: this.$el.querySelector('#tab_'+name),//null
                tabPanelEl: panel.$el,
                tabPanelIframeEl: panel.$el.querySelector('iframe')
            };
        },
        getSeldItemObj() {
            return this.getItemObj(this.currentName);
        },
        resize() {
            this.$refs['TabNavs'].resize();
            // console.log('height', this.$refs['domTabHead'].offsetHeight)
            // console.log('offsetHeight', this.$el.offsetHeight)
            //this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block";
            this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px';
            // console.log('main height', this.$refs['domTabBody'].style.height)
            let tabScroll = this.$refs['domTabScroll'];
            this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth;
        },
        handleShowDrpMenus(evt) {
            evt.stopPropagation();
            const rects = evt.currentTarget.getClientRects()[0];
            this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height);
        },
        handleHideDrpMenus() {
            this.$refs['cmp-drpMenus'].hide();
        },
        handleMoreMenuClick(vm, event) {
            // this.activeKey = vm.$el.getAttribute('alt');
            this.resize();
        },
        handleScrollLt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft - (step || this.scrollStep);
        },
        handleScrollLtMouseDown() {
            let me = this;
            me.handleScrollLtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollLt(10);
            }, 10);
        },
        handleScrollLtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleScrollRt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft + (step || this.scrollStep);
        },
        handleScrollRtMouseDown() {
            let me = this;
            me.handleScrollRtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollRt(10);
            }, 10);
        },
        handleScrollRtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleTabChange(panel) {
            if(panel.name==this.currentName){
                return;
            }
            this.setCurrentName(panel.name);
                      
        },
        handleTabClose(name) {
            this.closeItem(name);
        },
        handleTabCloseAll(){
            this.$emit('onRemoveAllTab');
            this.resize();
        },
        handleTabCloseLt(name,index){
            this.$emit('onRemoveLeft',name,index);
            this.resize();
        },
        handleTabCloseRt(name,index){
            this.$emit('onRemoveRight',name,index);
            this.resize();
        },
        handleTabCloseOt(name,index){
            this.$emit('onRemoveOther',name,index);
            this.resize();
        },
        handleFullScreen(){
            this.$emit('onFullScreen')
        }
    },
    render(h) {
        let {hasMoreMenu,hasContextMenu}=this;
        let children = this.panels;
        let headStyle={
            style:{
                display: this.isSinglePage ? "none" : "block"
            }
        }
        let navData={
            props:{
                panels:children,
                hasContextMenu:hasContextMenu
            },
            on:{
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose,
                onTabCloseAll: this.handleTabCloseAll,
                onTabCloseLt:this.handleTabCloseLt,
                onTabCloseRt:this.handleTabCloseRt,
                onTabCloseOt:this.handleTabCloseOt,
                onFullScreen:this.handleFullScreen
            },
            ref:'domTabSrcollInner'
        };
        let scrollLtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollLt,
                mousedown: this.handleScrollLtMouseDown,
                mouseup: this.handleScrollLtMouseUp,
                mouseleave:this.handleScrollLtMouseUp,
            },
            title:this.$t('hivuiMain_tab_scroll_lt')
        }, scrollRtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollRt,
                mousedown: this.handleScrollRtMouseDown,
                mouseup: this.handleScrollRtMouseUp,
                mouseleave:this.handleScrollRtMouseUp,
            },
            title:this.$t('hivuiMain_tab_scroll_rt')
        }, moreBtn = {
            on: {
                mouseover: this.handleShowDrpMenus,
                mouseout: this.handleHideDrpMenus
            },
            title:this.$t('hivuiMain_tab_scroll_more')
        }, drpMenus = {
            props: {
                children: children
            },
            on: {
                click: this.handleMoreMenuClick,
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose
            }
        }, hideSty = {
            style: {
                position: "relative"
            },
            on: {
                mouseout: this.showTab,
                mouseover: this.hideTab
            }
        };
        const isConciseLayout = this.layout =='concise';
        return (
            <div class="pl-tabs">
                <div class={isConciseLayout?'pl-tabs-hd concise':'pl-tabs-hd'} ref='domTabHead' {...headStyle}>
                    {
                        isConciseLayout&&(
                            <div class="pl-tabs-logo">
                                <LogoCont logoType="tabLogo"></LogoCont>
                            </div>
                        )
                    }
                    <div class="pl-tabs-tool" ref='domTabTool'>
                        <div class="item"  ref='domTabScrollLt' {...scrollLtBtn}>
                            <i class="iconfont icon-arrow-left"></i>
                        </div>
                        <div class="item" ref='domTabScrollRt' {...scrollRtBtn}>
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                        {
                            hasMoreMenu&&(
                                <div class="item" ref='domTabScrollMore' {...moreBtn} >
                                    <i class="iconfont icon-arrow-down"></i>
                                    <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus>
                                </div>
                            )
                        }
                        
                    </div>
                    <div class="pl-tabs-scroll" ref='domTabScroll'>
                        <TabNav {...navData} ref='TabNavs'></TabNav>
                    </div>
                </div>
                <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}

export default Tabs;

import findIndex from 'lodash/findIndex'
import Panel from './panel.vue'
import TabNav from './tabNav.jsx'
import DrpMenus from './drpMenus'
import LogoCont from "@main/components/logo";
const Tabs = {
    name: 'PTabs',
    props: {
        value: {},
        hasMoreMenu:{
            type:Boolean,
            default:true
        },
        hasContextMenu:{
            type:Boolean,
            default:true
        },
        isSinglePage:{
            type:Boolean,
            default:false
        },
    },
    watch: {
        value(value) {
            if(value==this.currentName){
                return;
            }
            this.setCurrentName(value)
        },
    },
    inject:['showTab','hideTab'],
    data() {
        return {
            currentName: this.value || this.activeName,
            contextMenuKey: null,
            scrollStep: 115,
            showScroll: false,
            panels: []
        }
    },
    created() {
        this.$on('tab-nav-update', this.calcPaneInstances.bind(null, true));
    },
    mounted() {
        this.calcPaneInstances();
        window.addEventListener('resize',this.resize);
    },
    updated() {
        this.calcPaneInstances();
    },
    beforeDestroy() {
        window.removeEventListener('resize',this.resize);
    },
    computed: {
        layout() {
            return window.localStorage.getItem("layout");
        },
    },
    methods: {
        setCurrentName(value) {
            this.currentName = value;  
            //绑定提是v-model所以这里要加一下，这样可以对 props 传进来的value 进行改变          
            this.$emit('input', value);
            this.$nextTick(r=>{
                let panel = this.getItem(value);
                this.$emit('onActiveTab',panel);
            });  
        },
        calcPaneInstances() {
            //收集插槽里头的组件实例，以重新渲染
            if (this.$slots.default) {
                const panelslots = this.$slots.default.filter(vnode => vnode.tag &&
                    vnode.componentOptions && vnode.componentOptions.Ctor.options.name === 'PTabpanel');
                // update indeed
                const panels = panelslots.map(({ componentInstance }) => componentInstance);
                const panelsChanged = !(panels.length === this.panels.length && panels.every((pane, index) => pane === this.panels[index]));
                if (panelsChanged) {
                    this.panels = panels;
                    this.$set(this,'panels',panels)
                }
            } else if (this.panels.length !== 0) {
                this.$set(this,'panels',[])
            }
        },
        closeItem(key) {
            let me = this;
            me.$emit('onRemoveTab', key);
            me.resize();
        },
        closeCurItem() {
            this.closeItem(this.currentName);
        },
        getItemIndex(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            return index;
        },
        getItem(name) {
            let index = findIndex(this.panels, item => {
                return item.name == name;
            });
            if (index > -1) {
                return this.panels[index];
            }
            return null;
        },
        getItemObj(name) {
            let panel = this.getItem(name);
            if (panel == null) return null; 
            return {   
                //.$refs['TabNavs']
                id:name,
                uid:name,
                name:name,
                tabEl: this.$el.querySelector('#tab_'+name),//null
                tabPanelEl: panel.$el,
                tabPanelIframeEl: panel.$el.querySelector('iframe')
            };
        },
        getSeldItemObj() {
            return this.getItemObj(this.currentName);
        },
        resize() {
            this.$refs['TabNavs'].resize();
            // console.log('height', this.$refs['domTabHead'].offsetHeight)
            // console.log('offsetHeight', this.$el.offsetHeight)
            //this.$refs['domTabHead'].style.display=this.isSinglePage ? "none" : "block";
            this.$refs['domTabBody'].style.height = this.$el.offsetHeight - this.$refs['domTabHead'].offsetHeight + 'px';
            // console.log('main height', this.$refs['domTabBody'].style.height)
            let tabScroll = this.$refs['domTabScroll'];
            this.showScroll = tabScroll.offsetWidth < tabScroll.scrollWidth;
        },
        handleShowDrpMenus(evt) {
            evt.stopPropagation();
            const rects = evt.currentTarget.getClientRects()[0];
            this.$refs['cmp-drpMenus'].show(rects.left,rects.top + rects.height);
        },
        handleHideDrpMenus() {
            this.$refs['cmp-drpMenus'].hide();
        },
        handleMoreMenuClick(vm, event) {
            // this.activeKey = vm.$el.getAttribute('alt');
            this.resize();
        },
        handleScrollLt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft - (step || this.scrollStep);
        },
        handleScrollLtMouseDown() {
            let me = this;
            me.handleScrollLtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollLt(10);
            }, 10);
        },
        handleScrollLtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleScrollRt(step) {
            let el = this.$refs['domTabScroll'];
            el.scrollLeft = el.scrollLeft + (step || this.scrollStep);
        },
        handleScrollRtMouseDown() {
            let me = this;
            me.handleScrollRtMouseUp();
            me.scrollPressTimer = setInterval(function () {
                me.handleScrollRt(10);
            }, 10);
        },
        handleScrollRtMouseUp() {
            clearInterval(this.scrollPressTimer);
        },
        handleTabChange(panel) {
            if(panel.name==this.currentName){
                return;
            }
            this.setCurrentName(panel.name);
                      
        },
        handleTabClose(name) {
            this.closeItem(name);
        },
        handleTabCloseAll(){
            this.$emit('onRemoveAllTab');
            this.resize();
        },
        handleTabCloseLt(name,index){
            this.$emit('onRemoveLeft',name,index);
            this.resize();
        },
        handleTabCloseRt(name,index){
            this.$emit('onRemoveRight',name,index);
            this.resize();
        },
        handleTabCloseOt(name,index){
            this.$emit('onRemoveOther',name,index);
            this.resize();
        },
        handleFullScreen(){
            this.$emit('onFullScreen')
        }
    },
    render(h) {
        let {hasMoreMenu,hasContextMenu}=this;
        let children = this.panels;
        let headStyle={
            style:{
                display: this.isSinglePage ? "none" : "block"
            }
        }
        let navData={
            props:{
                panels:children,
                hasContextMenu:hasContextMenu
            },
            on:{
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose,
                onTabCloseAll: this.handleTabCloseAll,
                onTabCloseLt:this.handleTabCloseLt,
                onTabCloseRt:this.handleTabCloseRt,
                onTabCloseOt:this.handleTabCloseOt,
                onFullScreen:this.handleFullScreen
            },
            ref:'domTabSrcollInner'
        };
        let scrollLtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollLt,
                mousedown: this.handleScrollLtMouseDown,
                mouseup: this.handleScrollLtMouseUp,
                mouseleave:this.handleScrollLtMouseUp,
            },
            title:this.$t('hivuiMain_tab_scroll_lt')
        }, scrollRtBtn = {
            style: {
                display: this.showScroll ? 'inline-block' : 'none'
            },
            on: {
                //click:this.handleScrollRt,
                mousedown: this.handleScrollRtMouseDown,
                mouseup: this.handleScrollRtMouseUp,
                mouseleave:this.handleScrollRtMouseUp,
            },
            title:this.$t('hivuiMain_tab_scroll_rt')
        }, moreBtn = {
            on: {
                mouseover: this.handleShowDrpMenus,
                mouseout: this.handleHideDrpMenus
            },
            title:this.$t('hivuiMain_tab_scroll_more')
        }, drpMenus = {
            props: {
                children: children
            },
            on: {
                click: this.handleMoreMenuClick,
                onTabChange: this.handleTabChange,
                onTabClose: this.handleTabClose
            }
        }, hideSty = {
            on: {
                mouseout: this.showTab,
                mouseover: this.hideTab
            }
        };
        const isConciseLayout = this.layout =='concise';
        return (
            <div class="pl-tabs">
                <div class={isConciseLayout?'pl-tabs-hd concise':'pl-tabs-hd'} ref='domTabHead' {...headStyle}>
                    {
                        isConciseLayout&&(
                            <div class="pl-tabs-logo">
                                <LogoCont logoType="tabLogo"></LogoCont>
                            </div>
                        )
                    }
                    <div class="pl-tabs-tool" ref='domTabTool'>
                        <div class="item"  ref='domTabScrollLt' {...scrollLtBtn}>
                            <i class="iconfont icon-arrow-left"></i>
                        </div>
                        <div class="item" ref='domTabScrollRt' {...scrollRtBtn}>
                            <i class="iconfont icon-arrow-right"></i>
                        </div>
                        {
                            hasMoreMenu&&(
                                <div class="item" ref='domTabScrollMore' {...moreBtn} >
                                    <i class="iconfont icon-arrow-down"></i>
                                    <DrpMenus ref="cmp-drpMenus" {...drpMenus}></DrpMenus>
                                </div>
                            )
                        }
                        
                    </div>
                    <div class="pl-tabs-scroll" ref='domTabScroll'>
                        <TabNav {...navData} ref='TabNavs'></TabNav>
                    </div>
                </div>
                <div class="pl-tabpanel-bd" ref='domTabBody' {...hideSty}>
                    {this.$slots.default}
                </div>
            </div>
        )
    }
}

export default Tabs;

Show line notes below