弹框样式修改&& 左侧联动关闭操作面板

chenyabin

2021-04-12 61903a7e8e95405c23d627ad3c08618bd775715e

 src/components/panel/ToolBoxPanel.vue

@@ -1,10 +1,12 @@
<template>
  <div class="left-top-toolbox-panel">
    <div class="specific-tools">
      <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @click.enter.native="changeSelectMouse">
      <el-tooltip :popper-class="'map-tooltip'" effect="dark" content="工具" placement="left">
        <el-button :class="selectGroup === true ?'active-button':''" class="el-button-choice"   @click.enter.native="changeSelectMouse">
          <img src="@assets/images/map-pages/icon/toolbox/Selecd/tool.png" alt="" class="icon" />
          <!--<span class="span-default">工具</span>-->
      </el-button>
        </el-button>
      </el-tooltip>
      <transition name="animationChange">
        <el-row v-show="selectGroup" class="specific-tools-group">
          <el-popover
@@ -20,8 +22,8 @@
                       @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">{{ item.label }}</span>
              <span v-else class="default-span">{{ 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)"
                       v-show="item.index!=='2'">
@@ -39,9 +41,9 @@
<!--            </div>-->
            <lc-base-map v-show="item.index==='2'"></lc-base-map>
          </el-popover>
          <el-button @click="changeSelect" class="special-button">
          <!-- <el-button @click="changeSelect" class="special-button">
            <i class="el-icon-d-arrow-left"></i>
          </el-button>
          </el-button> -->
        </el-row>
      </transition>
    </div>
@@ -93,6 +95,9 @@

// 测量的方法
import Measure from '@/components/plugin/MeaSure'

//
import bus from '@/eventBus'

export default {
  name: 'ToolBoxPanel',
@@ -261,7 +266,19 @@
      ]
    }
  },
  mounted () {
    /* import bus from '@/eventBus' */
    const that = this
    bus.$on('changeState', function (state) {
      if (state.num !== 1 && state.type) {
        that.selectGroup = false
        that.isShow = []
        that.active = -1
      }
    })
  },
  methods: {

    init (map) {
      this.map = map
      this.toolBoxPanelVisible = true
@@ -380,12 +397,20 @@
    },
    changeSelect () {
      this.selectGroup = false
      this.isShow = !this.isShow
      this.active = -1
    },
    changeSelectMouse () {
      this.selectGroup = true
      this.isShow = []
      this.selectGroup = !this.selectGroup
      if (this.selectGroup) {
        this.isShow = []
      } else {
        this.isShow = !this.isShow
        this.active = -1
      }
      const state = {
        type: this.selectGroup,
        num: 1
      }
      bus.$emit('changeState', state)
    }
  }
}
@@ -487,7 +512,12 @@
      .special-button {
        width: 0.1362rem;
        height: 0.2725rem;
        color: @color-over;
        background:@background-color4;
        color:@color-tool;
        border:1px solid @color-tool;
      }
      .special-button:hover{
        color: #00fff6;
      }
    }
  }