+
+
-
@@ -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);
+
+
-
+
@@ -98,6 +98,7 @@