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

perf: to-top按钮随滚动条出现/消失

Browse Source
This commit is contained in:
陈劲松
2020-04-21 18:00:21 +08:00
parent 52219ec6b4
commit 6c50e8da90
17 changed files with 201 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
nezha-fronted/src/components/page/config/promServer.vue
View File

@@ -93,12 +93,14 @@
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" class="to-top" :style="{top: toTopBtnTop}" :class="{'to-top-is-hover': tableHover}" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<div class="pagination-bottom" v-show="!showSubList">
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :obj="promServer" :isFullScreen="isFullScreen" :from="'promServer'" :targetTab.sync="targetTab" :detail="promDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -217,6 +219,9 @@
promDetail: [],
//底部上滑框相关end
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
tableId: 'promTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
rightBox: { //弹出框相关
@@ -722,6 +727,12 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
}
});
this.tablelable = localStorage.getItem("nz-tableTitle-" + localStorage.getItem("nz-username") + "-" + this.$route.path)