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

feat: dashboard页左上角panel列表增加滚动条

Browse Source
This commit is contained in:
陈劲松
2020-03-13 13:44:05 +08:00
parent dcf51c4793
commit 1d1553dcf7
2 changed files with 26 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
nezha-fronted/src/components/page/dashboard/panel.vue
View File

@@ -10,12 +10,12 @@
<div class="content-right"> <div class="content-right">
<div class="top-tools"> <div class="top-tools">
<div> <div>
<el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" > <el-dropdown @command="panelChange" class="panel-dropdown-title" trigger="click" v-scrollBar:el-dropdown>
<el-row :gutter="10" class="el-dropdown-link" style=""> <el-row :gutter="10" class="el-dropdown-link" style="">
<el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col> <el-col :span="21" class="panel-list-title" :title="showPanel.name">{{showPanel.name}}</el-col>
<el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col> <el-col :span="3" style="padding-left:0px !important;"><i class="el-icon-arrow-down el-icon--right"></i></el-col>
</el-row> </el-row>
<el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown" > <el-dropdown-menu class="nz-dashboard-dropdown" slot="dropdown">
<el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item> <el-dropdown-item>{{$t('dashboard.panel.createPanelTitleSec')}}</el-dropdown-item>
<el-dropdown-item v-for="item in panelData" :key="item.id+1" <el-dropdown-item v-for="item in panelData" :key="item.id+1"
:class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item"> :class="showPanel.id==item.id?'nz-dashboard-dropdown-bg':''" :command="item">

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

@@ -126,18 +126,22 @@ Vue.directive("scrollBar", {
if (arg === "el-table") { if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper"); el = el.querySelector(".el-table__body-wrapper");
!el && console.warn("未发现className为el-table__body-wrapper的dom"); !el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
// 启用x轴后不让原生滚动条出来作乱 el = el.querySelector(".el-dropdown-menu");
vnode.context.$nextTick(() => { !el && console.warn("未发现className为el-dropdown-menu的dom");
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
});
} }
// 启用x轴后不让原生滚动条出来作乱
vnode.context.$nextTick(() => {
el.classList.add("ps");
el.addEventListener("ps-scroll-y", () =>
el.classList.add("ps")
);
el.addEventListener("ps-scroll-x", () =>
el.classList.add("ps")
);
});
const rules = ["fixed", "absolute", "relative"]; const rules = ["fixed", "absolute", "relative"];
if (!rules.includes(window.getComputedStyle(el, null).position)) { if (!rules.includes(window.getComputedStyle(el, null).position)) {
console.error( console.error(
@@ -153,13 +157,17 @@ Vue.directive("scrollBar", {
const { arg } = binding; const { arg } = binding;
if (arg === "el-table") { if (arg === "el-table") {
el = el.querySelector(".el-table__body-wrapper"); el = el.querySelector(".el-table__body-wrapper");
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");
el._ps_.update();
}, 1500)
!el && console.warn("未发现className为el-table__body-wrapper的dom"); !el && console.warn("未发现className为el-table__body-wrapper的dom");
} else if (arg === "el-dropdown") {
el = el.querySelector(".el-dropdown-menu");
!el && console.warn("未发现className为el-dropdown-menu的dom");
} }
setTimeout(() => {
el.classList.add("ps");
el.classList.add("ps--active-y");
el._ps_.update();
}, 1500)
try { try {
vnode.context.$nextTick(() => { vnode.context.$nextTick(() => {
el_scrollBar(el); el_scrollBar(el);