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

feat: 所有侧滑增加点击外部后关闭的事件

Browse Source
This commit is contained in:
陈劲松
2020-02-26 18:26:55 +08:00
parent 54bfb5266f
commit d5f41c9ad0
11 changed files with 44 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1134,3 +1134,7 @@ li{
.el-textarea textarea {
height: 140px !important;
}
/*el-data-picker选中背景色*/
.el-date-table td.current:not(.disabled) span {
background-color: $global-text-color-active;
}

6
nezha-fronted/src/components/common/rightBox/addEndpointBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box-840">
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)">
<div class="right-box right-box-add-endpoint" v-if="rightBox.show" @mousedown="showEditParamBox(false)" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
</div>
@@ -337,6 +337,10 @@
this.editParamBox.show = show;
},
clickos() {
this.esc();
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;

2
nezha-fronted/src/components/common/rightBox/alertConfigBox.vue
View File

@@ -36,7 +36,7 @@
</el-form-item>
<!--linkedId-->
<el-form-item :label="$t('alert.config.link')" prop="linkId">
<el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small">
<el-select v-if="rightBox.isEdit" v-model="alertRule.linkId" placeholder="" size="small" popper-class="config-dropdown">
<el-option :id="'alert-linke-'+item.id" v-for="item in linkObjList" :key="item.id" :label="alertRule.type == 3 ? item.host : item.name" :value="item.id"></el-option>
</el-select>
<div v-if="!rightBox.isEdit" class="right-box-form-content-txt">{{alertRule.linkObject ? alertRule.linkObject.name : ''}}</div>

5
nezha-fronted/src/components/common/rightBox/assetBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box-580">
<div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit">
<div class="right-box right-box-add-asset" v-if="editUnitShow" @click="editQuit" id="asset-edit-quit" v-clickoutside="clickos">
<!--顶部按钮-->
<div class="right-box-top-btns">
<button v-if="!tabView && pageObj.id" type="button" @click="deleteData('asset', pageObj.id)" id="asset-edit-del"
@@ -650,6 +650,9 @@
}
},
methods: {
clickos() {
this.sendStateData('close');
},
cancelEdit(data) {
if (data === false) {
this.getAssetTypeOptionData();

2
nezha-fronted/src/components/common/rightBox/dcBox.vue
View File

@@ -164,7 +164,7 @@
this.rightBox.isEdit = isEdit;
},
clickos() {
//this.rightBox.show = false;
this.rightBox.show = false;
},
/*关闭弹框*/
esc() {

6
nezha-fronted/src/components/common/rightBox/editEndpointBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box">
<div class="right-box right-box-edit-endpoint" v-if="rightBox.show">
<div class="right-box right-box-edit-endpoint" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="edit-ep-del" type="button" v-if="rightBox.isEdit && endpoint.id != ''" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -235,6 +235,10 @@
this.subBox.show = false;
},
clickos() {
this.esc();
},
// 清除param
clearAllParam() {
this.endpoint.paramObj = [];

6
nezha-fronted/src/components/common/rightBox/moduleBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box">
<div class="right-box right-box-module" v-if="rightBox.show">
<div class="right-box right-box-module" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="module-del" type="button" v-if="module.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -140,6 +140,10 @@
this.rightBox.show = false;
},
clickos() {
this.esc();
},
/*保存*/
save() {
this.module.param = this.paramToJson(this.module.paramObj);

5
nezha-fronted/src/components/common/rightBox/panelBox.vue
View File

@@ -1,6 +1,6 @@
<template key="panelBox">
<transition name="right-box-580">
<div class="right-box right-box-panel z-top" v-if="rightBox.show">
<div class="right-box right-box-panel z-top" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button type="button" v-if="panel.id != ''" @click="del(panel)" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -59,6 +59,9 @@
setTitle(title) {
this.rightBox.title = title;
},
clickos() {
this.esc();
},
//面板相关方法
del: function(u) {
this.$confirm(this.$t("tip.confirmDelete"), {

6
nezha-fronted/src/components/common/rightBox/projectBox.vue
View File

@@ -1,6 +1,6 @@
<template>
<transition name="right-box">
<div class="right-box right-box-project" v-if="rightBox.show">
<div class="right-box right-box-project" v-if="rightBox.show" v-clickoutside="clickos">
<!-- begin--顶部按钮-->
<div class="right-box-top-btns">
<button id="project-del" type="button" v-if="project.id != '' && rightBox.isEdit" @click="del" class="nz-btn nz-btn-size-normal nz-btn-size-alien nz-btn-style-light nz-btn-min-width-82">
@@ -71,6 +71,10 @@
this.rightBox.isEdit=isEdit;
},
clickos() {
this.esc();
},
/*关闭弹框*/
esc() {
this.rightBox.show = false;

5
nezha-fronted/src/components/page/dashboard/chartBox.vue
View File

@@ -53,7 +53,7 @@
}
</style>
<template key="chartBox">
<div>
<div v-clickoutside="clickos">
<panel-box :panel="panel" @reload="panelReload" ref="panelBox2"></panel-box>
<transition name="right-box">
@@ -270,6 +270,9 @@
show(show) {
this.rightBox.show = show;
},
clickos() {
this.esc();
},
toAddPanel() {
this.$refs.panelBox2.show(true);
this.panel = {

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

@@ -65,7 +65,7 @@ Vue.use(ElementUI);
Vue.use(Vuex);
Vue.use(VueResource);
const exceptClassName = []; //clickoutside排除的class
const exceptClassName = ["config-dropdown", "nz-pop", "el-picker", "chart-box-dropdown", 'metric-dropdown']; //clickoutside排除的class(白名单)
const clickoutside = {
// 初始化指令
bind(el, binding, vnode) {
@@ -73,14 +73,13 @@ const clickoutside = {
if (el.contains(e.target)) {
return false;
} else {
console.info(e)
let flag = true;
let attrs = e.target.attributes;
for (let i = 0; i < attrs.length; i++) {
if (attrs[i].name == 'class') {
if ((attrs[i].value + '').indexOf("el-select-dropdown") != -1) {
top: for (let i = 0; i < e.path.length; i++) {
for (let j = 0; j < exceptClassName.length; j++) {
if (e.path[i].className && e.path[i].className.indexOf(exceptClassName[j]) != -1) {
flag = false;
break;
break top;
}
}
}