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

perf: 修复endpointquery有时候空白的问题

Browse Source
This commit is contained in:
chenjinsong
2020-05-07 18:36:39 +08:00
parent 1fd2483542
commit 9a23601c86
3 changed files with 17 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
nezha-fronted/src/components/common/bottomBox/tabs/endpointQueryTab.vue
View File

@@ -265,12 +265,13 @@
}); });
}, },
tableReload() { tableReload() {
this.tableShow = false; var table = this.$refs.endpointQueryTable;
setTimeout(() => { let resizeTimeout = setInterval(() => {
this.tableShow = true; if (!window.resizing) {
//this.queryEndpoint(); table.setHeight();
}, 300); clearInterval(resizeTimeout);
//this.$nextTick(() => {this.tableShow = true}); }
}, 200);
}, },
queryEndpoint() { queryEndpoint() {
this.loading = true; this.loading = true;
@@ -684,6 +685,7 @@
mounted() { mounted() {
this.getPanelData(); this.getPanelData();
//this.$nextTick(() => { //this.$nextTick(() => {
setTimeout(() => {this.$refs.endpointQueryTable.setHeight();}, 700);
setTimeout(() => { setTimeout(() => {
//绑定滚动条事件，控制top按钮 //绑定滚动条事件，控制top按钮
let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper"); let el = this.$refs.endpointQueryTable.$el.querySelector(".el-table__body-wrapper");

2
nezha-fronted/src/main.js
View File

@@ -99,7 +99,7 @@ Vue.use(plTable);
/*指令*/ /*指令*/
Vue.directive('clickoutside', clickoutside); Vue.directive('clickoutside', clickoutside);
Vue.directive('scrollBar', scrollBar); Vue.directive('scrollBar', scrollBar);
window.resizing = false;
window.vm = new Vue({ window.vm = new Vue({
el: '#app', el: '#app',
router, router,

13
nezha-fronted/src/tools.js
View File

@@ -183,6 +183,7 @@ export const scrollBar = {
export const bottomBoxWindow = { export const bottomBoxWindow = {
// 鼠标拖动二级列表 // 鼠标拖动二级列表
listResize(vm, e) { listResize(vm, e) {
window.resizing = true;
let mainListDom = document.querySelector(".main-list-with-sub"); //主列表 let mainListDom = document.querySelector(".main-list-with-sub"); //主列表
let subListDom = document.querySelector(".sub-list"); //副列表 let subListDom = document.querySelector(".sub-list"); //副列表
let contentRightDom = document.querySelector(".content-right"); //右侧内容区 let contentRightDom = document.querySelector(".content-right"); //右侧内容区
@@ -194,6 +195,7 @@ export const bottomBoxWindow = {
let mouseInitialY = e.clientY; let mouseInitialY = e.clientY;
document.onmousemove = (e) => { document.onmousemove = (e) => {
window.resizing = true;
mainListDom.classList.remove('main-and-sub-transition'); mainListDom.classList.remove('main-and-sub-transition');
subListDom.classList.remove('main-and-sub-transition'); subListDom.classList.remove('main-and-sub-transition');
e.preventDefault(); e.preventDefault();
@@ -213,17 +215,17 @@ export const bottomBoxWindow = {
subListDom.style.height = subInitialHeight-mouseMoveY+'px'; subListDom.style.height = subInitialHeight-mouseMoveY+'px';
} }
// 主、副列表最小高度限制为15px // 主、副列表最小高度限制为15px; 23是因为拖动区域有8的高度
if(parseInt(mainListDom.style.height) >= contentRightHeight-15){ if(parseInt(mainListDom.style.height) > contentRightHeight-23){
vm.toTopBtnTop = contentRightHeight+5+'px'; vm.toTopBtnTop = contentRightHeight+5+'px';
mainListDom.style.height = contentRightHeight-15+'px'; mainListDom.style.height = contentRightHeight-23+'px';
} }
if(parseInt(mainListDom.style.height) <= 15){ if(parseInt(mainListDom.style.height) <= 15){
vm.toTopBtnTop = '35px'; vm.toTopBtnTop = '35px';
mainListDom.style.height = '15px'; mainListDom.style.height = '15px';
} }
if(parseInt(subListDom.style.height) >= contentRightHeight-15){ if(parseInt(subListDom.style.height) > contentRightHeight-23){
subListDom.style.height = contentRightHeight-15+'px'; subListDom.style.height = contentRightHeight-23+'px';
} }
if(parseInt(subListDom.style.height) <= 15){ if(parseInt(subListDom.style.height) <= 15){
subListDom.style.height = '15px'; subListDom.style.height = '15px';
@@ -249,6 +251,7 @@ export const bottomBoxWindow = {
} }
}; };
document.onmouseup = () => { document.onmouseup = () => {
window.resizing = false;
mainListDom.classList.add('main-and-sub-transition'); mainListDom.classList.add('main-and-sub-transition');
subListDom.classList.add('main-and-sub-transition'); subListDom.classList.add('main-and-sub-transition');
document.onmousemove = null; document.onmousemove = null;