修改选中效果

chenzeping

2021-03-16 628a103286887e42b5916a483fcbcf8d08963b64

修改选中效果

 src/assets/images/map-pages/icon/toolbox/biaohuimark/circlemark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/dingweimark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/juliceliangmark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/linemark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/liubianxing2mark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/mianjiceliangmark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/rectmark.png

 src/assets/images/map-pages/icon/toolbox/biaohuimark/shanchu.png

 src/components/panel/ToolBoxPanel.vue

@@ -5,6 +5,7 @@
        <img src="@assets/images/map-pages/icon/toolbox/tool.png" alt="">
        <span>工具</span>
      </el-button>
      <transition name="animationChange">
      <el-row v-show="selectGroup" class="specific-tools-group">
        <el-popover
            placement="bottom"
@@ -18,19 +19,21 @@
            <img :src="item.icon" alt=""/>
            <span>{{ item.label }}</span>
          </el-button>
          <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT)">
            <el-button v-for="(itemT,indexT) in item.items" :key="indexT" @click="choiceItem(itemT,indexT)">
            <img :src="itemT.icon" :title="itemT.title"/>
          </el-button>
        </el-popover>
        <el-button @click="changeSelect" class="special-button">
          <i :class="selectGroup === false ? 'el-icon-d-arrow-right':'el-icon-d-arrow-left'"></i>
            <i :class="selectGroup === false ? 'el-icon-d-arrow-left':'el-icon-d-arrow-left'"></i>
        </el-button>
      </el-row>
      </transition>
    </div>
  </div>
</template>

<script>
// 功能导航
import plot from '@assets/images/map-pages/icon/toolbox/biaohui.png'
import polygon from '@assets/images/map-pages/icon/toolbox/celiang1.png'
import location from '@assets/images/map-pages/icon/toolbox/ditu.png'
@@ -45,6 +48,10 @@
import polygonS from '@assets/images/map-pages/icon/toolbox/ju.png'
import polygonY from '@assets/images/map-pages/icon/toolbox/circle.png'
import del from '@assets/images/map-pages/icon/toolbox/del.png'

// 选中的内容图片
import markerChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/dingweimark.png'
import lineChoose from '@assets/images/map-pages/icon/toolbox/biaohuimark/linemark.png'

// 测量
import distance from '@assets/images/map-pages/icon/toolbox/juli.png'
@@ -68,13 +75,15 @@
              index: '1-1',
              label: '点标绘',
              icon: marker,
              title: '点标绘'
              title: '点标绘',
              iconChoose: markerChoose
            },
            {
              index: '1-2',
              label: '线标绘',
              icon: line,
              title: '线标绘'
              title: '线标绘',
              iconChoose: lineChoose
            },
            {
              index: '1-4',
@@ -185,7 +194,7 @@
        }
      ],
      selectGroup: false,
      active: 0,
      active: -1,
      drawLayer: null,
      map: null,
      L: window.L
@@ -194,6 +203,9 @@
  methods: {
    changeChoose (index) {
      this.active = index
    },
    changeSelect () {
      this.selectGroup = !this.selectGroup
    },
    choiceItem (itemT) {
      switch (itemT.label) {
@@ -264,16 +276,21 @@
        fillOpacity: 0.1,
        fill: true
      })
    },
    // 左上功能控制
    changeSelect () {
      this.selectGroup = !this.selectGroup
    }
  }
}
</script>

<style lang="less" scoped>
.animationChange-enter-active, .animationChange-leave-active {
  transition: all 0.5s;
}

.animationChange-enter, .animationChange-leave-to {
  opacity: 0;
  transform: translateX(-100px);
}

.left-top-toolbox-panel {
  position: absolute;
  left: 0;
@@ -284,6 +301,7 @@
    display: flex;

    .el-button {
      z-index: 999;
      padding: 0;
      margin: 0 0.015rem;
      width: 45px;