fix: 详情下拉关系弹框,鼠标编辑外部无法隐藏

This commit is contained in:
@changcode
2022-02-18 14:32:52 +08:00
parent e1be7c7377
commit 04bf99a406
4 changed files with 18 additions and 24 deletions

View File

@@ -59,12 +59,12 @@ export default {
})
},
// 点击事件 控制弹框的展示隐藏,展示全部的数据
more (data, showMore, index) {
more (data, index) {
if (index === 1) {
// 展示数据
this.relationshipMoreDataOne = data
// 弹框的显示隐藏
this.relationshipShowMoreOne = !showMore
this.relationshipShowMoreOne = true
// 展示当前弹框是,隐藏其他弹框
this.relationshipShowMoreTow = false
}
@@ -72,20 +72,14 @@ export default {
// 展示数据
this.relationshipMoreDataTow = data
// 弹框的显示隐藏
this.relationshipShowMoreTow = !showMore
this.relationshipShowMoreTow = true
// 展示当前弹框是,隐藏其他弹框
this.relationshipShowMoreOne = false
}
},
mouseout () {
this.timer = setTimeout(() => {
this.relationshipShowMoreTow = false
this.relationshipShowMoreOne = false
}, 300)
this.relationshipShowMoreTow = false
this.relationshipShowMoreOne = false
}
},
beforeDestroy () {
// 移除定时器
clearInterval(this.timer)
},
}
}

View File

@@ -63,8 +63,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="overview__domain-more" @click="more(relationshipDataOne, 1)" v-if="relationshipShowOne">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
</div>
@@ -82,8 +82,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="overview__domain-more" @click="more(relationshipDataTow, 2)" v-if="relationshipShowTow">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
</div>

View File

@@ -71,8 +71,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="overview__domain-more" @click="more(relationshipDataOne, 1)" v-if="relationshipShowOne">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
</div>
@@ -90,8 +90,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="overview__domain-more" @click="more(relationshipDataTow, 2)" v-if="relationshipShowTow">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.ip" :title="item.ip">{{item.ip}}</span>
</div>

View File

@@ -55,8 +55,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataOne, relationshipShowMoreOne, 1)" v-if="relationshipShowOne" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne">
<div class="overview__domain-more" @click="more(relationshipDataOne, 1)" v-if="relationshipShowOne">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreOne" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataOne" :key="item">
<span v-if="item.domain" :title="item.domain">{{item.domain}}</span>
</div>
@@ -74,8 +74,8 @@
</div>
</div>
<div class="overview__domain-btn">
<div class="overview__domain-more" @click="more(relationshipDataTow, relationshipShowMoreTow, 2)" v-if="relationshipShowTow" @mouseout="mouseout()">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow">
<div class="overview__domain-more" @click="more(relationshipDataTow, 2)" v-if="relationshipShowTow">...</div>
<div class="overview__domain-more-tabs show-more-list" v-if="relationshipShowMoreTow" v-ele-click-outside="mouseout">
<div class="domain-more-tab" v-for="item in relationshipMoreDataTow" :key="item">
<span v-if="item.appName" :title="item.appName">{{item.appName}}</span>
</div>