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

24
nezha-fronted/src/assets/stylus/main.scss
View File

@@ -149,18 +149,23 @@ li{
position: relative;
}
.to-top {
position: absolute;
bottom: 10px;
right: 5px;
position: fixed;
right: 16px;
border-radius: 5px;
height: 40px;
width: 40px;
border: none;
cursor: pointer;
opacity: 0.5;
opacity: 0;
background-color: #bbb;
outline: none;
z-index: 10;
transition: opacity .2s linear, top .2s linear;
transform: translateY(-50%);
bottom: 35px;
}
.to-top.to-top-is-hover, .nz-table .el-table__body-wrapper.ps--scrolling-y .to-top {
opacity: 0.5;
}
.to-top>i {
font-size: 20px;
@@ -1626,6 +1631,7 @@ li{
}
.ps__thumb-x {
bottom: 0;
background-color: #bbb;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
@@ -1681,6 +1687,12 @@ li{
.dropdownBtn>.el-button-group>.el-button:last-of-type {
padding: 0 5px;
}
.dropdownBtn>.el-button-group>.el-button {
width: 30px;
}
.dropdownBtn>.el-button-group {
width: 60px;
}
.export-left-btn {
display: inline-block;
width: 30px;
@@ -1696,6 +1708,10 @@ li{
/*export相关*/
.dropdownBtn .el-dropdown__caret-button{
top:0px !important;
left: -1px;
}
.export-xlsx .el-dialog__body{
padding: 10px 20px 20px 20px;
}

15
nezha-fronted/src/components/common/bottomBox/tabs/alertMessageTab.vue
View File

@@ -32,7 +32,7 @@
v-loading="loading"
ref="alertMessageSubList"
tooltip-effect="light"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
:height="$tableHeight.openSubList.subList"
:cell-class-name="labelsClassName"
@selection-change="selectChange"
@@ -109,10 +109,13 @@
<i class="nz-icon nz-icon-gear"></i>
</span>
</template>
<template v-slot="scope">
<button v-if="scope.$index == 0" :class="{'to-top-is-hover': tableHover}" class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn && subResizeShow" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<project-box :project="viewProjectData" ref="projectBox" @reload="getAlertList"></project-box>
<module-box :module="viewModuleData" @reload="getAlertList" ref="moduleBox"></module-box>
<asset-box :edit-unit-show='viewAssetState' @refreshData="getAlertList" @sendStateData="tabControl" ref="assetEditUnit"></asset-box>
@@ -181,6 +184,8 @@
total: 0
},
tableHover: false, //控制滚动条和top按钮同时出现
importBox: {show: false, title:this.$t('overall.exportExcel')},
deleteBox: {show: false, ids: "", remark: '', state: 2},
@@ -529,6 +534,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") + "-/alertList")

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

@@ -130,7 +130,7 @@
width="180">
</el-table-column>
</el-table>-->
<button class="to-top" v-show="showTopBtn" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<button class="to-top" v-show="showTopBtn" :class="{'to-top-is-hover': tableHover}" @click="$('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<el-dialog class="line-chart-block-modal nz-dialog"
:title="$t('project.endpoint.dialogTitle')"
@@ -196,6 +196,7 @@
data() {
let temp = this;
return {
tableHover: false,
loading: false,
showTopBtn: false, //主列表top按钮
currentEndpoint: {},
@@ -1032,6 +1033,12 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
}
});
}

15
nezha-fronted/src/components/common/bottomBox/tabs/endpointTab.vue
View File

@@ -31,7 +31,7 @@
v-loading="loading"
class="nz-table endpoint-table"
:height="$tableHeight.noPagination"
v-scrollBar:el-table
v-scrollBar:el-table="'large'"
ref="endpointTable"
style="width: 100%;">
<el-table-column
@@ -78,9 +78,11 @@
<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" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<button class="to-top" v-show="showTopBtn" @click="$toTop('ps', 1)"><i class="nz-icon nz-icon-top"></i></button>
<element-set
v-clickoutside="elementsetHide"
@@ -113,6 +115,9 @@
endpointDetail: {}, //用来查看详情的对象
asset: {}, //对应props的obj
showTopBtn: false, //top按钮是否显示
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
loading: false,
tableTitle: [
{
@@ -347,6 +352,12 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
}
});
}

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

@@ -86,12 +86,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="alertRuleForMessage" :isFullScreen="isFullScreen" :from="'alertRule'" :targetTab.sync="targetTab" :detail="ruleDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -134,6 +136,9 @@
showSubList: false, //是否展示二级列表
alertRuleForMessage: {}, //传给alertMessage上滑框的对象
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
tableId: 'alertRuleTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mainTableHeight: this.$tableHeight.normal, //主列表table高度
@@ -538,6 +543,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)

13
nezha-fronted/src/components/page/alert/list.vue
View File

@@ -122,12 +122,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" :isFullScreen="isFullScreen" :from="'alertMessage'" :targetTab.sync="targetTab" :detailList="tabDetailList"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" :tabList="tabList"></bottom-box>
@@ -200,6 +202,9 @@
showSubList: false, //是否展示二级列表
mainTableHeight: this.$tableHeight.normal, //主列表table高度
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
//导出相关
importBox: {show: false, title:this.$t('overall.exportExcel')},
deleteBox: {show: false, ids: "", remark: '', state: 2},
@@ -650,6 +655,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)

12
nezha-fronted/src/components/page/asset/asset.vue
View File

@@ -239,12 +239,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="alertMsgAsset" :isFullScreen="isFullScreen" :from="'asset'" :targetTab.sync="targetTab" :detail="assetDetail"
@reload="getAssetData"
@@ -297,6 +299,8 @@
showSubList: false, //是否展示二级列表
targetTab: '', //展示二级列表中的哪个页签
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //自定义列弹框是否显示
tableId: 'assetTable', //需要分页的table的id，用于记录每页数量
searchMsg: { //给搜索框子组件传递的信息
@@ -991,6 +995,12 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
}
//resize时刷新左侧列表滚动条
let _this = this;

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

@@ -103,12 +103,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="user" :isFullScreen="isFullScreen" :from="'account'" :targetTab.sync="targetTab" :detail="userDetail"
@@ -214,6 +216,9 @@
userDetail: [],
//底部上滑框相关end
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
tableId: 'accountTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false, //是否显示回到顶部按钮
rightBox: { //弹出框相关
@@ -616,6 +621,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)

19
nezha-fronted/src/components/page/config/dc.vue
View File

@@ -113,16 +113,18 @@
</el-table-column>
<el-table-column width="28" :resizable="false">
<template slot="header" slot-scope="scope">
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<i class="nz-icon nz-icon-gear"></i>
</span>
<span @click.stop="elementsetShow('shezhi',$event)" class="nz-table-gear">
<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="cabinetDc" :isFullScreen="isFullScreen" :from="'dc'" :targetTab.sync="targetTab" :detail="dcDetail"
@closeSubList="showSubList = false" @fullScreen="fullScreen" @exitFullScreen="exitFullScreen" @listResize="listResize" ></bottom-box>
@@ -157,6 +159,9 @@
cabinetDc: {}, // 用在二级cabinet列表页里
dcDetail: [], //dc的详情信息，包含标题
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
showElementSet: false, //控制自定义列的弹框
tableId: 'dcTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
@@ -447,6 +452,12 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
window.onresize = function() {
el._ps_.update();
};

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

@@ -107,10 +107,12 @@
<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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</template>
<mib-browser :showTab="showTab" v-if="showTab == 'browser'" @toFileTab="showTab = 'file'"></mib-browser>
</div>
@@ -141,6 +143,9 @@
showTab: 'file', //file/browser
loading: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
tableId: 'mibTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
mib: {
@@ -376,6 +381,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)

14
nezha-fronted/src/components/page/config/model.vue
View File

@@ -79,10 +79,12 @@
<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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
</left-menu>
<element-set
@@ -104,6 +106,10 @@
return {
tableId: 'modelTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
model: {
id: '',
name: '',
@@ -319,6 +325,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)

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

@@ -79,10 +79,12 @@
<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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
</left-menu>
<element-set
@@ -103,6 +105,9 @@
loading: false,
tableId: 'operationLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -338,6 +343,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)

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)

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

@@ -85,10 +85,12 @@
<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" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</template>
</el-table-column>
</el-table>
<Pagination :tableId="tableId" :pageObj="pageObj" @pageNo='pageNo' @pageSize='pageSize' ref="Pagination"></Pagination>
<button class="to-top" v-show="showTopBtn" @click="$toTop"><i class="nz-icon nz-icon-top"></i></button>
</div>
</left-menu>
<element-set
@@ -109,6 +111,9 @@
loading: false,
tableId: 'terminalLogTable', //需要分页的table的id，用于记录每页数量
showTopBtn: false,
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
tableHover: false, //控制滚动条和top按钮同时出现
rightBox: { //弹出框相关
show: false,
isEdit: false, //false查看，true编辑
@@ -359,6 +364,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)

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

@@ -154,12 +154,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" v-cloak :pageObj="endpointPageObj" @pageNo='endpointPageNo' @pageSize='endpointPageSize' ref="endpointPagination"></Pagination>
</div>
<button class="to-top" v-show="showTopBtn && mainResizeShow" @click="$toTop('ps', 0)"><i class="nz-icon nz-icon-top"></i></button>
</div>
<bottom-box v-if="showSubList" :show-sub-list="showSubList" :subResizeShow="subResizeShow" :isFullScreen="isFullScreen"
:from="'endpoint'" :targetTab.sync="targetTab" :detail="endpointDetail" :obj="curEndpoint" :assetDetail="assetDetail"
@@ -211,6 +213,7 @@
endpointDetail: [],
targetTab: '',
mainTableHeight: this.$tableHeight.normal, //主列表table高度
toTopBtnTop: this.$tableHeight.toTopBtnTop, //to-top按钮的top属性
isFullScreen: false, //是否是全屏，用来控制拖动条是否展示
tableId: 'projectTable', //需要分页的table的id，用于记录每页数量
mainResizeShow: true, //dom高度改变时部分内容是否展示
@@ -220,6 +223,7 @@
userData: [],
showTopBtn: false, //主列表top按钮
tableHover: false, //控制滚动条和top按钮同时出现
editEndpoint: {id: '', host: '', port: '', param: '', path: '', asset: {}, project: {}, module: {}, moduleId: '', assetId: '', paramObj: []},
endpointTableTitle: [
{
@@ -721,7 +725,7 @@
this.userData = response.data.list
}
})
},
}
},
created() {
this.currentProject = this.$store.state.currentProject;
@@ -751,6 +755,13 @@
this.showTopBtn = false;
}
});
el.addEventListener("mouseenter", () => {
this.tableHover = true;
});
el.addEventListener("mouseleave", () => {
this.tableHover = false;
});
}
});
//resize时刷新左侧列表滚动条
@@ -1107,10 +1118,6 @@
.control-icon-checked{
color:#666;
}
.dropdownBtn .el-dropdown__caret-button{
top:0px !important;
left: -1px;
}
.endpoint-query-table .el-loading-spinner .circular{
width: 42px;
height: 42px;

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

@@ -81,8 +81,10 @@ Vue.prototype.$tableHeight = { //列表页表格的高度
normal: 'calc(100% - 100px)', //常规高度，特例在下方定义
openSubList: { //打开二级列表后的高度
mainList: 'calc(100% - 60px)',
subList: 'calc(100% - 86px)'
subList: 'calc(100% - 86px)',
toTopBtnTop: 'calc(50% - 11px)'
},
toTopBtnTop: 'calc(100% - 73px)',
noPagination: 'calc(100% - 60px)', //特例：没有翻页组件
};

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

@@ -202,27 +202,31 @@ export const bottomBoxWindow = {
//往上方拖动：
if (e.clientY < mouseInitialY) {
vm.toTopBtnTop = mainInitialHeight-mouseMoveY+20+'px';
mainListDom.style.height = mainInitialHeight-mouseMoveY+'px';
subListDom.style.height = subInitialHeight+mouseMoveY+'px';
}
//往下方拖动：
if (e.clientY > mouseInitialY) {
vm.toTopBtnTop = mainInitialHeight+mouseMoveY+20+'px';
mainListDom.style.height = mainInitialHeight+mouseMoveY+'px';
subListDom.style.height = subInitialHeight-mouseMoveY+'px';
}
// 主、副列表最小高度限制为15px
if(parseInt(mainListDom.style.height) >= contentRightHeight-15){
vm.toTopBtnTop = contentRightHeight+5+'px';
mainListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(mainListDom.style.height) <= 15){
mainListDom.style.height = 15+'px';
vm.toTopBtnTop = '35px';
mainListDom.style.height = '15px';
}
if(parseInt(subListDom.style.height) >= contentRightHeight-15){
subListDom.style.height = contentRightHeight-15+'px';
}
if(parseInt(subListDom.style.height) <= 15){
subListDom.style.height = 15+'px';
subListDom.style.height = '15px';
}
//当主副列表可视区域小于一定值时，不展示内容
if(parseInt(mainListDom.style.height) <= 100){
@@ -283,6 +287,7 @@ export const bottomBoxWindow = {
vm.inTransform = n;
if (!n) {
vm.mainTableHeight = vm.$tableHeight.normal; //重置table的高度
vm.toTopBtnTop = vm.$tableHeight.toTopBtnTop;
vm.isFullScreen = false;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
@@ -306,6 +311,7 @@ export const bottomBoxWindow = {
document.querySelector(".sub-list").style.height = '';
} else {
vm.mainTableHeight = vm.$tableHeight.openSubList.mainList; //重置table高度
vm.toTopBtnTop = vm.$tableHeight.openSubList.toTopBtnTop;
//移动分页组件的位置
let paginationTop = document.querySelector(".pagination-top");
paginationTop.appendChild(document.querySelector(".pagination-bottom").removeChild(document.querySelector(".pagination")));