gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 优化二级列表拖动效果、提取公共方法

Browse Source
This commit is contained in:
陈劲松
2020-03-30 14:14:09 +08:00
parent 9df446d163
commit 6bd9e46fad
10 changed files with 233 additions and 811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

147
nezha-fronted/src/components/page/project/project.vue
View File

@@ -47,7 +47,7 @@
<!--endpoint-->
<div class="content-right">
<!-- 主列表 -->
<div class="main-list" :class="{'main-list-with-sub': showSubList}">
<div class="main-list main-and-sub-transition" :class="{'main-list-with-sub': showSubList}">
<div class="top-tools" v-show="mainResizeShow">
<!--<div class="pagination-top"></div>-->
<div class="top-tool-main-right" :class="{'top-tool-main-right-to-left': showSubList}">
@@ -149,6 +149,8 @@
import exportXLSX from "../../common/exportXLSX";
import loading from "../../common/loading";
import chartDataFormat from "../../charts/chartDataFormat";
var vm;
export default {
name: "project2",
components: {
@@ -156,6 +158,7 @@
'loading': loading,
},
data() {
vm = this;
let temp = this;
return {
endpointDetail: [],
@@ -519,101 +522,17 @@
}
},
methods: {
// 全屏
fullScreen() {
this.$bottomBoxWindow.fullScreen(vm);
},
// 退出全屏
exitFullScreen() {
this.$bottomBoxWindow.exitFullScreen(vm);
},
// 鼠标拖动二级列表
listResize(e) {
let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
let subListDom = document.querySelector(".sub-list"); //副列表
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//得到点击时俩dom的初始高度：
let mainInitialHeight = mainListDom.offsetHeight;
let subInitialHeight = subListDom.offsetHeight;
//点击时鼠标的Y轴位置
let mouseInitialY = e.clientY;
let _this = this;
document.onmousemove = (e) => {
e.preventDefault();
//得到鼠标拖动的距离
let mouseMoveY = Math.abs(e.clientY - mouseInitialY);
//往上方拖动：
if (e.clientY < mouseInitialY) {
mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
subListDom.style.height = subInitialHeight+mouseMoveY+'px';
}
//往下方拖动：
if (e.clientY > mouseInitialY) {
mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
subListDom.style.height = subInitialHeight-mouseMoveY+'px';
}
// 主、副列表最小高度限制为15px
if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
mainListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(mainListDom.style.height) <= 15){
mainListDom.style.height = 15+'px';
}
if(parseInt(subListDom.style.height) >= contentRightHeight-15){
subListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(subListDom.style.height) <= 15){
subListDom.style.height = 15+'px';
}
//当主副列表可视区域小于一定值时，不展示内容
if(parseInt(mainListDom.offsetHeight) <= 100){
if (_this.mainResizeShow) {
_this.mainResizeShow = false;
}
} else {
if (!_this.mainResizeShow) {
_this.mainResizeShow = true;
}
}
if(parseInt(subListDom.offsetHeight) <= 100){
if (_this.subResizeShow) {
_this.subResizeShow = false;
}
} else {
if (!_this.subResizeShow) {
_this.subResizeShow = true;
}
}
};
document.onmouseup = () => {
document.onmousemove = null;
}
},
exitFullScreen() {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
//主列表
document.querySelector(".main-list-with-sub").style.height = this.mainListHeight ? this.mainListHeight + 'px' : 'calc(50% - 4px)';
//副列表
document.querySelector(".sub-list").style.height = this.mainListHeight ? contentRightHeight-this.mainListHeight-9 + 'px' : 'calc(50% - 4px)';
setTimeout(() => {
this.isFullScreen = false;
if (document.querySelector(".main-list-with-sub").offsetHeight >= 100) {
this.mainResizeShow = true;
}
if (document.querySelector(".sub-list").offsetHeight >= 100) {
this.subResizeShow = true;
}
}, 210);
},
fullScreen() {
let contentRightDom = document.querySelector(".content-right"); //右侧内容区
let contentRightHeight = contentRightDom.offsetHeight;//可视高度
this.isFullScreen = true;
//主列表
this.mainListHeight = document.querySelector(".main-list-with-sub").offsetHeight; //记录全屏前主列表的高度
document.querySelector(".main-list-with-sub").style.height = '0';
this.mainResizeShow = false;
//副列表
document.querySelector(".sub-list").style.height = contentRightHeight + 'px';
this.$bottomBoxWindow.listResize(vm, e);
},
elementsetShow(s, e) {
var eventfixed = {
@@ -952,45 +871,7 @@
this.getModuleList(this.currentProject.id);
},
showSubList(n) {
this.inTransform = n;
if (!n) {
this.mainTableHeight = this.$tableHeight.normal; //重置table的高度
this.isFullScreen = false;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
let paginationBottom = document.querySelector(".pagination-bottom");
paginationTop.classList.remove("display-none");
if (paginationTop.classList.contains("pagination-top-show")) {
paginationTop.classList.remove("pagination-top-show");
}
if (!paginationTop.classList.contains("pagination-top-hide")) {
paginationTop.classList.add("pagination-top-hide");
}
setTimeout(() => {
paginationTop.classList.add("display-none");
paginationBottom.appendChild(paginationTop.removeChild(document.querySelector(".pagination")));
}, 210);
// 主列表恢复全屏
this.mainResizeShow = this.subResizeShow = true;
document.querySelector('.main-list').style.height = "";
//副列表高度清空
document.querySelector(".sub-list").style.height = '';
} else {
this.mainTableHeight = this.$tableHeight.openSubList.mainList; //重置table高度
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));
paginationTop.classList.remove("display-none");
setTimeout(() => {
if (paginationTop.classList.contains("pagination-top-hide")) {
paginationTop.classList.remove("pagination-top-hide");
}
if (!paginationTop.classList.contains("pagination-top-show")) {
paginationTop.classList.add("pagination-top-show");
}
}, 210);
}
this.$bottomBoxWindow.showSubListWatch(vm, n);
},
curEndpoint: {
deep: true,