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) { if (index === 1) {
// 展示数据 // 展示数据
this.relationshipMoreDataOne = data this.relationshipMoreDataOne = data
// 弹框的显示隐藏 // 弹框的显示隐藏
this.relationshipShowMoreOne = !showMore this.relationshipShowMoreOne = true
// 展示当前弹框是,隐藏其他弹框 // 展示当前弹框是,隐藏其他弹框
this.relationshipShowMoreTow = false this.relationshipShowMoreTow = false
} }
@@ -72,20 +72,14 @@ export default {
// 展示数据 // 展示数据
this.relationshipMoreDataTow = data this.relationshipMoreDataTow = data
// 弹框的显示隐藏 // 弹框的显示隐藏
this.relationshipShowMoreTow = !showMore this.relationshipShowMoreTow = true
// 展示当前弹框是,隐藏其他弹框 // 展示当前弹框是,隐藏其他弹框
this.relationshipShowMoreOne = false this.relationshipShowMoreOne = false
} }
}, },
mouseout () { mouseout () {
this.timer = setTimeout(() => { this.relationshipShowMoreTow = false
this.relationshipShowMoreTow = false this.relationshipShowMoreOne = false
this.relationshipShowMoreOne = false
}, 300)
} }
}, }
beforeDestroy () {
// 移除定时器
clearInterval(this.timer)
},
} }

View File

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

View File

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

View File

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