From acf1cadd6e2af1f288192e02e5b8303841d85c4b Mon Sep 17 00:00:00 2001 From: chenzeping <ChenZeping02609@163.com> Date: 星期三, 17 三月 2021 14:47:06 +0800 Subject: [PATCH] 功能弹出事件更改 --- src/components/panel/ToolBoxPanel.vue | 71 ++++++++++++++++++++--------------- 1 files changed, 40 insertions(+), 31 deletions(-) diff --git a/src/components/panel/ToolBoxPanel.vue b/src/components/panel/ToolBoxPanel.vue index 8d942da..2fdb720 100644 --- a/src/components/panel/ToolBoxPanel.vue +++ b/src/components/panel/ToolBoxPanel.vue @@ -1,13 +1,10 @@ <template> <div class="left-top-toolbox-panel"> <div class="specific-tools"> - <el-button class="el-button-choice" @click="changeSelect" v-show="selectGroup"> - <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt=""> - <span>宸ュ叿</span> - </el-button> - <el-button class="el-button-choice" @click="changeSelect" v-show="!selectGroup"> - <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""> - <a>宸ュ叿</a> + <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice" + @mouseover.enter.native="changeSelectMouse"> + <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt=""/> + <span class="span-default">宸ュ叿</span> </el-button> <transition name="animationChange"> <el-row v-show="selectGroup" class="specific-tools-group"> @@ -95,6 +92,11 @@ isShow: true, currentBaseMapCode: 'tianditu_img', basemapList: [], + selectGroup: false, + drawLayer: null, + map: null, + active: -1, + Selecd: -1, menuList: [ { icon: plot, @@ -239,13 +241,7 @@ } ] } - ], - selectGroup: false, - drawLayer: null, - map: null, - // L: window.L, - active: -1, - Selecd: -1 + ] } }, computed: { @@ -283,6 +279,9 @@ }) }, changeChoose (index) { + if (this.active === index) { + console.log('鍙栨秷褰撳墠閫変腑鐘舵��') + } this.active = index if (this.drawLayer == null) { this.drawLayer = this.L.layerGroup().addTo(this.map) @@ -368,12 +367,15 @@ setLogic (layer) { layer.on('dblclick', this.L.DomEvent.stop).on('dblclick', layer.toggleEdit) layer.setStyle({ - color: 'red' + color: 'yellow' }) }, changeSelect () { - this.selectGroup = !this.selectGroup + this.selectGroup = false this.isShow = !this.isShow + }, + changeSelectMouse () { + this.selectGroup = true } } } @@ -404,8 +406,9 @@ margin: 0 0.015rem; width: 45px; height: 45px; - background: @background-color-tools; - border: none; + background: @background-color; + //border: 1px solid @color-shadow; + vertical-align: middle !important; .base-map-img { position: absolute; @@ -420,14 +423,14 @@ height: 22px; } - span { - display: block; - color: @color-tool; - } - - a { + .span-default { display: block; color: @color-shadow; + } + + span { + display: block; + color: @color-over; } } @@ -437,8 +440,13 @@ margin: 0 0.015rem; width: 45px; height: 45px; - background: @background-color-tools; + background: @background-color; border: 1px solid @color-shadow; + } + + .active-button { + border: 0.00521rem solid #fff700; + box-shadow: 0 0 0.03rem #fff700; } .specific-tools-group { @@ -464,7 +472,7 @@ position: absolute; margin-left: 2px; background-color: rgba(0, 0, 0, .5); - color: white; + color: @color-over; .el-checkbox__label { padding-left: 5px !important; @@ -503,14 +511,15 @@ span { display: block; + color: @color-shadow; } } - } - .special-button { - width: 22.5px; - height: 45px; - color: @color-over; + .special-button { + width: 22px; + height: 45px; + color: @color-over; + } } } } -- Gitblit v1.8.0