diff --git a/src/resources/components/TsContain/TsContain.vue b/src/resources/components/TsContain/TsContain.vue index 69590c696c4977d87ce2105a3a0bc26de6d0ad67..a2581846804b41499eb5d8379190727181382989 100644 --- a/src/resources/components/TsContain/TsContain.vue +++ b/src/resources/components/TsContain/TsContain.vue @@ -1,5 +1,10 @@ @@ -140,7 +106,6 @@ export default { hideHeader: { type: Boolean, default: false }, //是否隐藏头部 siderWidth: { type: Number, default: 200 }, //slider的宽度 siderPosition: { type: String, default: 'left' }, // left, right - isDrag: { type: Boolean, default: false }, //slider是否可以拖动 isBackgroung: { type: Boolean, default: true }, // 背景色默认为灰色，如果传的话就白色 clearStyle: { type: Boolean, default: false }, //是否需要清除侧边栏的样式（背景色、圆角，不包含右侧固定高度） rightWidth: { type: Number, default: 200 }, @@ -151,70 +116,21 @@ export default { return { dragWidth: null, siderHide: this.isSiderHide, - rightSiderHide: this.isRightSiderHide ? this.isRightSiderHide : !!(this.isRightSiderHide && this.siderPosition == 'right') + rightSiderHide: this.isRightSiderHide ? this.isRightSiderHide : !!(this.isRightSiderHide && this.siderPosition == 'right'), + containHeight: '100%' }; }, mounted() { - if (this.isDrag) { - //如果可以拖动，则需要计算拖动范围 - let that = this; - this.$nextTick(() => { - this.href = window.location.href.replace(/\?[\s\S]*$/, ''); - let value = ''; //去掉缓存 - // let value = localStorage.getItem(this.href); - this.initConfig('', value); - const offset = -6; //控制handler偏移位置 - if (this.$refs.split && this.$refs.split.$el) { - let rightPane = document.getElementsByClassName('tscontain-split')[0]; - // let rightPane = document.getElementsByClassName('right-pane')[0]; - let newDiv = document.createElement('div'); - newDiv.id = 'verticalAfter'; - rightPane.appendChild(newDiv); - - let rightIcons = document.getElementById('verticalAfter'); - let newIcon = document.createElement('div'); - newIcon.id = 'rightIcons'; - rightIcons.appendChild(newIcon); - - let leftIcons = document.getElementById('verticalAfter'); - let newIconleft = document.createElement('div'); - newIconleft.id = 'leftIcons'; - rightIcons.style.left = this.siderWidth - offset + 'px'; - leftIcons.appendChild(newIconleft); - - newIconleft.style.display = 'none'; - leftIcons.addEventListener('click', () => { - that.verticals(); - // document.getElementsByClassName('ivu-split-trigger-con')[0].classList.add('isBlock'); - // istrigger.style = 'display:block'; - - if (!this.siderHide) { - newIcon.style.display = 'none'; - newIconleft.style.display = 'block'; - rightIcons.style.left = -offset + 'px'; - } else { - newIconleft.style.display = 'none'; - newIcon.style.display = 'block'; - rightIcons.style.left = this.siderWidth - offset + 'px'; - } - }); - } - }); - window.addEventListener('resize', this.initConfig); - } // if (this.sessionName) { //如果有存储 // let value = localStorage.getItem(this.sessionName + '_tsContainSider'); // value === 'false' ? this.siderHide = false : value === 'true' ? this.siderHide = true : ''; // } + this.handleContainHeight(); }, beforeDestroy() { this.sessionName && localStorage.removeItem(this.sessionName + '_tsContainSider'); //删除缓存，之前遗留问题 // this.sessionName && localStorage.setItem(this.sessionName + '_tsContainSider', this.siderHide); this.initSetTime && clearTimeout(this.initSetTime); - if (this.isDrag) { - //如果可以拖动，则需要计算拖动范围 - window.removeEventListener('resize', this.initConfig); - } }, methods: { verticals() { @@ -278,9 +194,35 @@ export default { //右侧展示隐藏 this.rightSiderHide = !this.rightSiderHide; this.$emit('rightSiderToggle'); + }, + handleContainHeight() { + this.$nextTick(() => { + let contain = this.$refs.contain; + let rect = contain?.getBoundingClientRect(); + if (rect && rect.top) { + this.containHeight = `calc(100vh - ${rect.top.toFixed(0)}px - 16px)`; // 减去底部的16 + } + }); } }, computed: { + handleBodyHeight() { + if (this.mode === 'dialog') { + if (this.hideHeader) { + return {height: '100%'}; + } else { + return {height: 'calc(100% - 50px)'}; // header的高度 + } + } else if (this.containHeight) { + if (this.hideHeader) { + return {height: this.containHeight}; + } else { + return {height: `calc(${this.containHeight} - 50px)`}; + } + } else { + return {height: 'calc(100vh - 116px)'}; // 顶部菜单50px，导航栏50px，底部间隙16px + } + }, getTopStyle() { if (this.$slots.topLeft && this.$slots.topCenter && this.$slots.topRight) { //左中右 diff --git a/src/resources/components/TsContain/contain.less b/src/resources/components/TsContain/contain.less index e403623975035d1131c912c61c7926ef663eda82..179a78301e2c66334a2522ed559d8fe2ab0655e5 100644 --- a/src/resources/components/TsContain/contain.less +++ b/src/resources/components/TsContain/contain.less @@ -3,9 +3,8 @@ @contain-prev: tscontain-; //头部固定 .tscontain-container { - height: 100%; - - .tscontain-header ,.tscontain-headerBg{ + .tscontain-header, + .tscontain-headerBg { //padding: 0 16px; // height: 66px; // line-height: calc(66px - 2px); @@ -14,7 +13,7 @@ position: relative; z-index: 2; width: 100%; - &.border-none{ + &.border-none { border-bottom: 0 none !important; } .span-black { @@ -44,12 +43,12 @@ } }*/ } - .tscontain-headerbottom{ - border-bottom: 0 solid #ccc!important; + .tscontain-headerbottom { + border-bottom: 0 solid #ccc !important; } - .tscontain-headerBg{ - height: 66px!important; - line-height: calc(66px - 2px)!important; + .tscontain-headerBg { + height: 66px !important; + line-height: calc(66px - 2px) !important; } .tscontain-body { @@ -72,14 +71,14 @@ .tscontain-content { position: relative; } - .ivu-split-pane{ + .ivu-split-pane { overflow-x: hidden; overflow-y: auto; - .right-pane{ + .right-pane { padding-left: 6px; } } - #verticalAfter{ + #verticalAfter { width: 12px; height: 36px; position: absolute; @@ -90,9 +89,10 @@ cursor: pointer; // color: #fff; line-height: 24px; - border-radius: 4px; + border-radius: 4px; } - #rightIcons,#leftIcons{ + #rightIcons, + #leftIcons { line-height: 12px; &:after { content: '\e900'; // tsfont-left @@ -103,24 +103,24 @@ position: absolute; } } - #leftIcons{ + #leftIcons { &:after { - content: '\e986'!important; // tsfont-right + content: '\e986' !important; // tsfont-right } } // #verticalAfter:hover{ // background: #1670F0; // } - &.hideSider{ - .ivu-split-trigger-con{ + &.hideSider { + .ivu-split-trigger-con { // display: none; } - .ivu-split-pane.right-pane{ + .ivu-split-pane.right-pane { padding-left: 0px; } } - .right-btn { + .right-btn { position: fixed; top: 50%; right: 0;