From c803e406172652e17ca874ad6dc077ba1cd7cf4a Mon Sep 17 00:00:00 2001 From: wangqi <magical1908@outlook.com> Date: 星期三, 31 三月 2021 18:35:30 +0800 Subject: [PATCH] 弹窗显示 --- src/components/panel/ToolBoxPanel.vue | 55 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 35 insertions(+), 20 deletions(-) diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 0e88c14..1e47999 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -9,17 +9,19 @@ <transition name="animationChange"> <el-row v-show="selectGroup" class="specific-tools-group"> <el-popover + trigger="manual" placement="bottom" - trigger="click" :popper-class="'tools-panel-content'" v-for="(item,index) in menuList" :key="index" :width="item.index === '2'?230 : 150" + v-model="isShow[index]" > - <el-button slot="reference" class="el-button" :class="active === index && checked? 'tools-panel-choose':''" - @click="changeChoose(index)"> - <img :src="item.iconSelecd" alt="" v-if="active === index && checked"/> + <el-button slot="reference" class="el-button" + :class="active === index? 'tools-panel-choose':''" + @click.native="changeChoose(index)"> + <img :src="item.iconSelecd" alt="" v-if="active === index"/> <img :src="item.icon" alt="" v-else/> - <span v-if="active === index && checked">{{ item.label }}</span> + <span v-if="active === index">{{ item.label }}</span> <span v-else class="default-span">{{ item.label }}</span> </el-button> <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)" @@ -83,6 +85,11 @@ import distance from '@assets/images/map-pages/icon/toolbox/juli.png' import mm from '@assets/images/map-pages/icon/toolbox/M2.png' +// 涓嬭浇 +import FullScreen from '@assets/images/map-pages/icon/toolbox/fullscreen.png' +import cross from '@assets/images/map-pages/icon/toolbox/cross.png' +import vertical from '@assets/images/map-pages/icon/toolbox/vertical.png' + // 娴嬮噺鐨勬柟娉� import Measure from '@/components/plugin/MeaSure' @@ -90,7 +97,7 @@ name: 'ToolBoxPanel', data () { return { - isShow: false, + isShow: [], currentBaseMapCode: 'tianditu_img', basemapList: [], selectGroup: false, @@ -230,19 +237,19 @@ { index: '4-1', label: '鍏ㄥ睆', - icon: '', + icon: FullScreen, title: '鍏ㄥ睆' }, { index: '4-2', label: 'A4妯悜', - icon: '', + icon: cross, title: 'A4妯悜' }, { index: '4-3', label: 'A4绾靛悜', - icon: '', + icon: vertical, title: 'A4绾靛悜' } ] @@ -265,7 +272,6 @@ methods: { updateBasemapList () { this.basemapList = this.basemapHelper.getBasemapList() - console.log() }, changeBasemap (itm) { this.active = -1 @@ -291,17 +297,25 @@ this.drawLayer = this.L.layerGroup().addTo(this.map) } this.active = index - if (this.checkbutton === index) { - this.checked = !this.checked - this.Selecd = -1 - } else { - if (this.checkbutton === -1) { - this.checked = !this.checked - } else { - this.checked = true - } + // this.isShow[index] = !this.isShow[index] + // this.isShow[index - 1] = !this.isShow[index - 1] + // if (this.checkbutton === index) { + // this.checked = !this.checked + // this.Selecd = -1 + // } else { + // if (this.checkbutton === -1) { + // this.checked = !this.checked + // } else { + // this.checked = true + // } + // } + // this.checkbutton = index + // console.log(this.isShow[index - 1]) + console.log(this.basemapList) + for (let i = 0; i < this.isShow.length; i++) { + this.isShow[i] = false } - this.checkbutton = index + this.isShow[index] = true }, choiceItem (itemT, indexT) { this.Selecd = indexT @@ -407,6 +421,7 @@ }, changeSelectMouse () { this.selectGroup = true + this.isShow = [] } } } -- Gitblit v1.8.0