From 81e426e19db140e630f45409c1569fe16dbcc33f Mon Sep 17 00:00:00 2001 From: 徐旺旺 <11530253@qq.com> Date: 星期二, 18 五月 2021 15:25:19 +0800 Subject: [PATCH] 修复点击弹窗bug --- src/components/table/SummarySheet.vue | 203 +++++++++++++++++++++++--------------------------- 1 files changed, 92 insertions(+), 111 deletions(-) diff --git a/src/components/table/SummarySheet.vue b/src/components/table/SummarySheet.vue index c23dcd5..741ed40 100644 --- a/src/components/table/SummarySheet.vue +++ b/src/components/table/SummarySheet.vue @@ -1,36 +1,36 @@ <template> - <div class="summary-sheets"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> - <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn"> - <i class="el-icon-tickets icon"></i> - </div> - </el-tooltip> - <transition name="animationChange"> - <div class="subtopic" v-if="subtopic"> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> - <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('缁熻琛�')"> - <i class="icon iconfont iconbiaoge2"></i> - <!--<span class="icon-name">缁熻琛�</span>--> - </div> + <div class="summary-sheets"> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎶ヨ〃" placement="left"> + <div :class='["iconBtn",subtopic ? "active-button" : ""]' @click="subtopicBtn"> + <i class="el-icon-tickets icon"></i> + </div> </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom"> - <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('鎸囨爣')"> - <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> --> - <i class="el-icon-office-building icon"></i> - </div> - </el-tooltip> - <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom"> - <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('棰勬姤璀�')"> - <i class="icon iconfont iconbaojing01"></i> - <!--<span class="icon-name">棰勬姤璀�</span>--> - </div> - </el-tooltip> - </div> - </transition> - <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover> - <Warn v-show="companyVisible" ref="titlePropWarn"></Warn> - <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics> - </div> + <transition name="animationChange"> + <div class="subtopic" v-if="subtopic"> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="缁熻琛�" placement="bottom"> + <div :class='["iconBtn",summaryVisible ? "active-button" : ""]' @click="closeBtn('缁熻琛�')"> + <i class="icon iconfont iconbiaoge2"></i> + <!--<span class="icon-name">缁熻琛�</span>--> + </div> + </el-tooltip> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="鎸囨爣" placement="bottom"> + <div :class='["iconBtn",companyVisible ? "active-button" : ""]' @click="showStatisDialog('鎸囨爣')"> + <!-- <img src="@/assets/images/map-pages/icon/map/company.png" alt="" class="icon"> --> + <i class="el-icon-office-building icon"></i> + </div> + </el-tooltip> + <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="棰勬姤璀�" placement="bottom"> + <div :class='["iconBtn",warnVisible ? "active-button" : ""]' @click="showWarnDialog('棰勬姤璀�')"> + <i class="icon iconfont iconbaojing01"></i> + <!--<span class="icon-name">棰勬姤璀�</span>--> + </div> + </el-tooltip> + </div> + </transition> + <tab-handover v-show="summaryVisible" ref="titleProp"></tab-handover> + <Warn v-show="companyVisible" ref="titlePropWarn"></Warn> + <index-statistics v-show="warnVisible" ref="titlePropStatics"></index-statistics> + </div> </template> <script> @@ -56,26 +56,15 @@ subtopic: false } }, - // mounted () { - // const that = this - // bus.$on('changeState', function (state) { - // if (state.num !== 2 && state.type) { - // that.subtopic = false - // } - // }) - // this.$nextTick(() => { - // this.$refs.summarySheets.$on('closeDialog', () => { - // that.summaryVisible = false - // }) - // this.$refs.warnDialog.$on('closeDialog', () => { - // that.warnVisible = false - // }) - // this.$refs.indexStatisticsDialog.$on('closeDialog', () => { - // that.companyVisible = false - // }) - // }) - // }, methods: { + subtopicBtn () { + this.subtopic = !this.subtopic + const state = { + type: this.subtopic, + num: 2 + } + bus.$emit('changeState', state) + }, closeBtn (item) { this.$refs.titleProp.refsDatatitle(item) this.summaryVisible = !this.summaryVisible @@ -93,74 +82,66 @@ this.warnVisible = !this.warnVisible this.summaryVisible = false this.companyVisible = false - }, - subtopicBtn () { - this.subtopic = !this.subtopic - const state = { - type: this.subtopic, - num: 2 - } - bus.$emit('changeState', state) } } } </script> <style lang="less"> -.summary-sheets { - position: absolute; - display: inline-flex; - overflow: hidden; - top: 0.42979rem; - left: 0.14583rem; - /*width: 850px;*/ - /*height: 265px;*/ - z-index: 500; + .summary-sheets { + position: absolute; + display: inline-flex; + overflow: hidden; + top: 0.42979rem; + left: 0.14583rem; + /*width: 850px;*/ + /*height: 265px;*/ + z-index: 500; - .subtopic { - display: inline-flex; + .subtopic { + display: inline-flex; - .iconBtn { - margin-left: 0.03rem; - border-color: #00fff6; - color: #00fff6; + .iconBtn { + margin-left: 0.03rem; + border-color: #00fff6; + color: #00fff6; + } + + .iconBtn.active-button { + //border-color:#00fff6 !important; + //color:#00fff6 !important; + } + } + + .dialog { + //width: 800px; + //height: 300px; + position: absolute; + top: 15%; + left: 3rem; + } + + .animationChange-enter-active, .animationChange-leave-active { + transition: all 0.5s; + } + + .animationChange-enter, .animationChange-leave-to { + opacity: 0; + transform: translateX(-100px); + } + + /*color: #fff;*/ + + .el-icon-c-scale-to-original { + width: 30px; + height: 30px; + font-size: 30px; + } + + .el-dialog.el-dialog--center { + left: 0.5rem; + top: 0.73979rem; + } + } - - .iconBtn.active-button { - //border-color:#00fff6 !important; - //color:#00fff6 !important; - } - } - - .dialog { - //width: 800px; - //height: 300px; - position: absolute; - top: 15%; - left: 3rem; - } - - .animationChange-enter-active, .animationChange-leave-active { - transition: all 0.5s; - } - - .animationChange-enter, .animationChange-leave-to { - opacity: 0; - transform: translateX(-100px); - } - - /*color: #fff;*/ - - .el-icon-c-scale-to-original { - width: 30px; - height: 30px; - font-size: 30px; - } - - .el-dialog.el-dialog--center { - left: 0.5rem; - top: 0.73979rem; - } - -} </style> -- Gitblit v1.8.0