From 7c01548fbfe6c168b7a91afd5e3d17efecac2c81 Mon Sep 17 00:00:00 2001 From: jmal Date: Mon, 20 Jul 2020 18:01:06 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E6=96=87=E6=9C=AC=E7=BC=96?= =?UTF-8?q?=E8=BE=91=E5=99=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/preview/SimTextPreview.vue | 165 +++++++++++++++++----- src/utils/directives.js | 4 +- 2 files changed, 134 insertions(+), 35 deletions(-) diff --git a/src/components/preview/SimTextPreview.vue b/src/components/preview/SimTextPreview.vue index 5a9d605..b39a2b1 100644 --- a/src/components/preview/SimTextPreview.vue +++ b/src/components/preview/SimTextPreview.vue @@ -31,10 +31,10 @@ :close-on-click-modal="false" @close="closeDialog" :before-close="handleClose" - :width="dialogWidth*100+'%'" + :width="dialogWidth+'px'" v-resize="containerResize" class="simtext-dialog" - v-dialogDrag="{ dialogWidth: dialogWidth}"> + v-dialogDrag="{ dialogWidthPercent: dialogWidthPercent}">
@@ -47,8 +47,8 @@
-
-
+
+
-
+
- +
@@ -98,6 +98,7 @@
+
@@ -148,6 +149,7 @@ data(){ return{ lightTheme: true, + contentsHide: false, defalutLanguage: 'redis', lineWrapping: false, options: { @@ -162,11 +164,13 @@ diffEditor: false, textPreviewVisible: false, fullscreen: false, - dialogWidth: 0.7, + dialogWidth: 0, + dialogWidthPercent: 0.7, lastTransform: undefined, contentsWidth: 273, editorWidth: 1035, editorHieght: 640, + transition: 'all 500ms ease 0s', content: '', newContent: '', previewMode: true, @@ -189,6 +193,9 @@ } }, mounted() { + this.$nextTick(()=>{ + this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent + }) }, directives: { resize: { // 指令的名称 @@ -215,8 +222,7 @@ return } this.editableTabs = [] - this.editorWidth = document.body.clientWidth * this.dialogWidth - this.contentsWidth - this.editorHieght = document.body.clientHeight * this.dialogWidth - 50 + this.loadEditorSize() this.loading = this.$message({ iconClass: 'el-icon-loading', @@ -275,6 +281,7 @@ // 界面的渲染后的初始化工作 this.$nextTick(()=>{ + this.dargDialogSize() this.dragControllerDiv() this.setTheme() }) @@ -298,28 +305,91 @@ } return editorLanguage; }, + // 隐藏目录 + hideContents(){ + const that = this + let contents = document.querySelector('.file-contents') + let resize = document.querySelector('.editor-resize') + if(!this.contentsHide){ + contents.style.left = `-${this.contentsWidth}px` + resize.style.marginLeft = '0px' + setTimeout(function () { + that.editorWidth += that.contentsWidth + },250) + this.contentsHide = true + resize.setAttribute('icon-style', 'hide') + }else{ + contents.style.left = '0px' + resize.style.marginLeft = `${this.contentsWidth}px` + setTimeout(function () { + that.editorWidth -= that.contentsWidth + },250) + this.contentsHide = false + resize.setAttribute('icon-style', 'show') + } + }, + // 拖动调整窗口大小 + dargDialogSize(){ + // 右下角 + let nwse = document.querySelector('.el-dialog__body .nwse-resize') + if(nwse){ + const that = this + nwse.onmousedown = function (e) { + let startX = e.clientX; + let startY = e.clientY; + let editorWidth = that.editorWidth + let editorHieght = that.editorHieght + let dialogWidth = that.dialogWidth + document.onmousemove = function (e) { + console.log('onmousemove,onmousemove,onmousemove') + let endX = e.clientX; + let endY = e.clientY; + const moveX = endX - startX + if((dialogWidth + moveX) > 600){ + that.dialogWidth = dialogWidth + moveX + that.editorWidth = editorWidth + moveX + that.editorHieght = editorHieght + (endY - startY) + } + } + // 鼠标松开事件 + document.onmouseup = function () { + document.onmousemove = null + document.onmouseup = null + nwse.releaseCapture && resize.releaseCapture() + } + nwse.setCapture && nwse.setCapture() + return false + } + } + }, + // 拖动调整目录的宽度 dragControllerDiv() { - let resize = document.querySelector('.el-dialog__body .content .editor-resize'); - let left = document.querySelector('.file-contents'); - let leftTools = document.querySelector('.file-contents .dir-tools'); + let dialogBody = document.querySelector('.el-dialog__body .content') + let resize = document.querySelector('.el-dialog__body .content .editor-resize') + let contents = document.querySelector('.file-contents') + let leftTools = document.querySelector('.file-contents .dir-tools') if(resize){ // 鼠标按下事件 const that = this resize.onmousedown = function (e) { + if(that.contentsHide){ + return false + } let startX = e.clientX - let contentsStartWidth = left.offsetWidth + let contentsStartWidth = contents.offsetWidth + let dialogBodyWidth = dialogBody.clientWidth + let contentsMaxWidth = (dialogBodyWidth * 0.6)>273?(dialogBodyWidth * 0.6):600 // 鼠标拖动事件 document.onmousemove = function (e) { + that.transition = 'none 500ms ease 0s' let endX = e.clientX // 移动的距离。负数向左移动,正数向右移动 let moveLen = endX - startX if((contentsStartWidth + moveLen) > leftTools.style.minWidth.split('\px')[0]){ let contentsWidth = contentsStartWidth + moveLen - if(600 > contentsWidth){ + if(contentsWidth < contentsMaxWidth){ that.contentsWidth = contentsWidth - that.editorWidth = document.body.clientWidth * that.dialogWidth - (contentsStartWidth + moveLen) - console.log('contentsWidth:',that.contentsWidth) - console.log('editorWidth:',that.editorWidth) + that.editorWidth = that.dialogWidth - (contentsStartWidth + moveLen) } } } @@ -327,10 +397,13 @@ document.onmouseup = function (evt) { document.onmousemove = null document.onmouseup = null - resize.releaseCapture && resize.releaseCapture() //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 + //当你不在需要继续获得鼠标消息就要应该调用ReleaseCapture()释放掉 + resize.releaseCapture && resize.releaseCapture() + that.transition = 'all 500ms ease 0s' } - resize.setCapture && resize.setCapture() //该函数在属于当前线程的指定窗口里设置鼠标捕获 - return false; + //该函数在属于当前线程的指定窗口里设置鼠标捕获 + resize.setCapture && resize.setCapture() + return false } } }, @@ -414,8 +487,16 @@ } }, containerResize() { - this.editorWidth = document.body.clientWidth * this.dialogWidth - this.contentsWidth - this.editorHieght = document.body.clientHeight * this.dialogWidth - 50 + this.loadEditorSize() + }, + loadEditorSize(){ + this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent + if(this.contentsHide){ + this.editorWidth = this.dialogWidth + }else{ + this.editorWidth = this.dialogWidth - this.contentsWidth + } + this.editorHieght = document.body.clientHeight * this.dialogWidthPercent - 76 }, handleClose(done) { if(this.isShowUpdateBtn){ @@ -539,13 +620,14 @@ const dragDom = document.querySelector('.simtext-dialog .el-dialog'); if(this.fullscreen){ this.lastTransform = dragDom.style.transform - this.dialogWidth = 1 + this.dialogWidthPercent = 1 + this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent dragDom.style.transform="translate("+0+"px,"+0+"px)"; }else{ - this.dialogWidth = 0.7 - let dialogWidth = document.body.clientWidth * this.dialogWidth - let x = (document.body.clientWidth - dialogWidth)/2 - let y = (document.body.clientHeight - document.body.clientHeight * this.dialogWidth)/2 + this.dialogWidthPercent = 0.7 + this.dialogWidth = document.body.clientWidth * this.dialogWidthPercent + let x = (document.body.clientWidth - this.dialogWidth)/2 + let y = (document.body.clientHeight - this.dialogWidth)/2 if(this.lastTransform){ dragDom.style.transform=this.lastTransform }else{ @@ -581,7 +663,7 @@ if(dialog){ dialog.style.background = '#1e1e1e' } - if(fileContests){ + if(fileContests){1 fileContests.setAttribute('data-theme', 'dark') } if(header){ @@ -789,7 +871,7 @@ .file-contents{ - transition: left 500ms ease 0s; + left: 0; position: absolute; .content-tree{ @@ -841,7 +923,6 @@ bottom: 0; top: 0; cursor: col-resize; - transition: margin-left 500ms ease 0s; .darg-resize-conter { width: 2px; @@ -866,8 +947,8 @@ width: 10px; position: absolute; top: 50%; - margin-top: -6.5px; - left: 4px; + margin-top: -5px; + left: 3px; z-index: 999; border-width: 2px 2px 0 0; border-color: #9a9a9a; @@ -875,6 +956,15 @@ -webkit-transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); transform: matrix(-0.71, 0.71, 0.71, 0.71, 0, 0); } + + &[icon-style=hide] { + .editor-resize-conter:after { + left: -2px; + -webkit-transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0); + transform: matrix(0.71, -0.71, -0.71, -0.71, 0, 0); + } + } + } &[data-theme=dark] { @@ -950,7 +1040,16 @@ background: linear-gradient(rgba(0, 0, 0, 0.3), rgba(255, 255, 255, 0)); } } - + } + .nwse-resize { + z-index: 99999; + position: fixed; + width: 15px; + background: #00000000; + height: 15px; + margin-top: -15px; + float: right; + cursor: nwse-resize; } } diff --git a/src/utils/directives.js b/src/utils/directives.js index e018cc8..28cfb0b 100644 --- a/src/utils/directives.js +++ b/src/utils/directives.js @@ -134,9 +134,9 @@ Vue.directive('dialogDrag', { // 获取拖拽内容头部 const dialogHeaderEl = el.querySelector('.el-dialog__header'); const dragDom = el.querySelector('.el-dialog'); - let dialogWidth = document.body.clientWidth * binding.value.dialogWidth; + let dialogWidth = document.body.clientWidth * binding.value.dialogWidthPercent let x = (document.body.clientWidth - dialogWidth)/2 - let y = (document.body.clientHeight - document.body.clientHeight * binding.value.dialogWidth)/2 + let y = (document.body.clientHeight - document.body.clientHeight * binding.value.dialogWidthPercent)/2 dragDom.style.transform="translate("+x+"px,"+y+"px)"; dialogHeaderEl.style.cursor = 'move'; // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);