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-04-17 16:39:08 +08:00
parent 34985e4641
commit 6959f56e44
4 changed files with 130 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1071,33 +1071,68 @@ li{
overflow-x: hidden !important;
}
.el-scrollbar__thumb {
background-color: #aaa;
background-color: #ccc;
cursor: default;
}
.el-scrollbar__thumb:hover {
background-color: #bbb;
}
/*大中小三个尺寸，默认中*/
.el-scrollbar__bar.is-vertical {
width: 11px;
width: 8px;
}
.el-scrollbar__bar.is-horizontal {
height: 8px;
}
/*.el-scrollbar__bar.is-vertical:hover {
width: 11px;
}
.el-scrollbar__bar.is-horizontal:hover {
height: 11px;
}*/
.el-scrollbar-large .el-scrollbar__bar.is-vertical {
width: 11px;
}
.el-scrollbar-large .el-scrollbar__bar.is-horizontal {
height: 11px;
}
.el-scrollbar-normal .el-scrollbar__bar.is-vertical {
width: 8px;
}
.el-scrollbar-normal .el-scrollbar__bar.is-horizontal {
height: 8px;
}
/*.el-scrollbar-normal .el-scrollbar__bar.is-vertical:hover {
width: 11px;
}
.el-scrollbar-normal .el-scrollbar__bar.is-horizontal:hover {
height: 11px;
}*/
.el-scrollbar-small .el-scrollbar__bar.is-vertical {
width: 5px;
}
.el-scrollbar-small .el-scrollbar__bar.is-horizontal {
height: 5px;
}
/*.el-scrollbar-small .el-scrollbar__bar.is-vertical:hover {
width: 8px;
}
.el-scrollbar-small .el-scrollbar__bar.is-horizontal:hover {
height: 8px;
}*/
.new-search .el-scrollbar__bar.is-horizontal {
height: 4px;
}
.new-search .el-scrollbar__view {
height: calc(100% - 4px);
}
.app>.el-scrollbar__bar.is-vertical {
width: 5px;
}
.el-scrollbar__bar {
border-radius: 6px;
}
.el-autocomplete-suggestion__wrap.el-scrollbar__wrap, .el-cascader-menu__wrap.el-scrollbar__wrap {
margin-bottom: 0 !important;
}
.el-scrollbar__thumb:hover {
background-color: #999;
}
.right-box-form {
width: calc(100% - 30px);
}
@@ -1519,31 +1554,83 @@ li{
background-color: rgba(255, 99, 71, .85);
}
/*滚动条相关*/
.ps__thumb-y {
/*滚动条相关, 11px/8px/5px, 默认8px*/
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__thumb-y,
.ps__rail-y {
width: 8px;
}
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x,
.ps__rail-x,
.ps__thumb-x {
height: 8px;
}
.ps-scroll-small.ps__rail-y:hover > .ps__thumb-y,
.ps-scroll-small.ps__rail-y:focus > .ps__thumb-y,
.ps-scroll-small.ps__rail-y.ps--clicking .ps__thumb-y,
.ps-scroll-small .ps__thumb-y,
.ps-scroll-small .ps__rail-y {
width: 5px;
}
.ps-scroll-small.ps__rail-x:hover > .ps__thumb-x,
.ps-scroll-small.ps__rail-x:focus > .ps__thumb-x,
.ps-scroll-small.ps__rail-x.ps--clicking .ps__thumb-x,
.ps-scroll-small .ps__rail-x,
.ps-scroll-small .ps__thumb-x {
height: 5px;
}
.ps-scroll-normal.ps__rail-y:hover > .ps__thumb-y,
.ps-scroll-normal.ps__rail-y:focus > .ps__thumb-y,
.ps-scroll-normal.ps__rail-y.ps--clicking .ps__thumb-y,
.ps-scroll-normal .ps__thumb-y,
.ps-scroll-normal .ps__rail-y {
width: 8px;
}
.ps-scroll-normal.ps__rail-x:hover > .ps__thumb-x,
.ps-scroll-normal.ps__rail-x:focus > .ps__thumb-x,
.ps-scroll-normal.ps__rail-x.ps--clicking .ps__thumb-x,
.ps-scroll-normal .ps__rail-x,
.ps-scroll-normal .ps__thumb-x {
height: 8px;
}
.ps-scroll-large.ps__rail-y:hover > .ps__thumb-y,
.ps-scroll-large.ps__rail-y:focus > .ps__thumb-y,
.ps-scroll-large.ps__rail-y.ps--clicking .ps__thumb-y,
.ps-scroll-large .ps__thumb-y,
.ps-scroll-large .ps__rail-y {
width: 11px;
}
.ps__rail-y:hover > .ps__thumb-y, .ps__rail-y:focus > .ps__thumb-y, .ps__rail-y.ps--clicking .ps__thumb-y {
width: 11px;
.ps-scroll-large.ps__rail-x:hover > .ps__thumb-x,
.ps-scroll-large.ps__rail-x:focus > .ps__thumb-x,
.ps-scroll-large.ps__rail-x.ps--clicking .ps__thumb-x,
.ps-scroll-large .ps__rail-x,
.ps-scroll-large .ps__thumb-x {
height: 11px;
}
.ps__thumb-y {
right: 0px;
background-color: #888;
right: 0;
background-color: #bbb;
}
.ps__rail-x:hover > .ps__thumb-x, .ps__rail-x:focus > .ps__thumb-x, .ps__rail-x.ps--clicking .ps__thumb-x {
height: 6px;
.ps__thumb-x {
bottom: 0;
}
.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y,
.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x{
background-color: #bbb;
}
.ps .ps__rail-x:hover, .ps .ps__rail-y:hover, .ps .ps__rail-x:focus, .ps .ps__rail-y:focus, .ps .ps__rail-x.ps--clicking, .ps .ps__rail-y.ps--clicking {
background-color: transparent;
}
.ps__rail-y {
width: 6px;
}
.ps__rail-x {
height: 6px;
}
.el-table__fixed-right {
right: 0px !important;
right: 0 !important;
}
.asset .ps__rail-y {
z-index: 2000;

8
nezha-fronted/src/components/page/config/mibBrowser.vue
View File

@@ -143,7 +143,7 @@
</el-dropdown>
</div>
<!--tree-->
<el-scrollbar class="mib-browser-tree" ref="treeScrollbar">
<el-scrollbar class="el-scrollbar-normal mib-browser-tree" ref="treeScrollbar">
<el-tree
ref="walkTree"
highlight-current
@@ -171,7 +171,7 @@
<!--拖拽区-->
<div class="tree-detail-resize" @mousedown="treeDetailResize"></div>
<!--detail-->
<el-scrollbar class="mib-browser-detail" ref="detailScrollbar">
<el-scrollbar class="el-scrollbar-normal mib-browser-detail" ref="detailScrollbar">
<div class="mib-browser-detail-row">
<div>Name</div>
<div>{{currentWalk.name}}</div>
@@ -218,7 +218,7 @@
</span>
</div>
<pl-table :row-height="28" use-virtual :datas="resultData" border :empty-text="$t('config.mib.noData')"
class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table :pagination-show="false">
class="mib-browser-table nz-table" style="width: 100%;height: calc(100% - 31px)" v-loading="loading" v-scrollBar:el-table="'large'" :pagination-show="false">
<pl-table-column label="Name/OID" v-slot="{row}">
<div class="too-long-split" @click="searchParam.oid = row.oid">{{row.name ? row.name : row.oid}}</div>
</pl-table-column>
@@ -554,7 +554,7 @@
)
} catch (e) {}
return out
},
}
},
mounted() {
this.getWalkData();

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

@@ -104,7 +104,7 @@
border
class="nz-table endpoint-table"
:height="mainTableHeight"
v-scrollBar:el-table
v-scrollBar:el-table="'normal'"
v-show="mainResizeShow"
ref="endpointTable"
style="width: 100%;">

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

@@ -125,14 +125,13 @@ export const scrollBar = {
el = el.querySelector(".el-cascader__tags");
!el && console.warn("未发现className为el-cascader__tags的dom");
}
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-y", () => {
el.classList.add("ps");
});
el.addEventListener("ps-scroll-x", () => {
el.classList.add("ps");
});
//el上挂一份属性
el_scrollBar(el);
});
@@ -148,10 +147,17 @@ export const scrollBar = {
}
},
componentUpdated(el, binding, vnode, oldVnode) {
const { arg } = binding;
const { arg, value } = binding;
if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom");
// 滚动条尺寸 large/normal/small 默认normal
vnode.context.$nextTick(() => {
if (value) {
el.querySelector(".ps__rail-x").classList.add("ps-scroll-" + value);
el.querySelector(".ps__rail-y").classList.add("ps-scroll-" + value);
}
});
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
@@ -165,6 +171,7 @@ export const scrollBar = {
el = el.querySelector(".table-scroll");
!el && console.warn("未发现className为table-scroll的dom");
}
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");