yjdp-web/src/components/Map/quickZoom.vue

<template>
  <div class="flex">
    <div class="plusIcon" @click="addStep"></div>
    <div style="margin: 10px 0; position: relative">
      <el-slider v-model="step" class="slider" :min="1" :max="4" vertical :show-tooltip="false" height="183px" @input="changeStep" />
      <div v-show="step === 1" class="tooltip">市</div>
      <div v-show="step === 2" class="tooltip" style="bottom: 36px">区/县</div>
      <div v-show="step === 3" class="tooltip" style="bottom: 93px; left: -162px">镇/街道</div>
      <div v-show="step === 4" class="tooltip" style="bottom: 160px; left: -162px">村/社区</div>
    </div>
    <div class="minusIcon" @click="reduceStep"></div>
  </div>
</template>

<script lang="ts" setup>
const emits = defineEmits(['changeStep']);
interface Props {
  zoom: number;
}
const props = withDefaults(defineProps<Props>(), {});
const step = ref(1);
watch(
  () => props.zoom,
  (zoom) => {
    if (zoom <= 7.9) {
      step.value = 1;
    } else if (zoom > 7.9 && zoom <= 9.21) {
      step.value = 2;
    } else if (zoom > 9.21 && zoom <= 11.38) {
      step.value = 3;
    } else if (zoom > 11.38) {
      step.value = 4;
    }
  },
  {
    immediate: true
  }
);

// 发生变化时
const changeStep = (value) => {
  emits('changeStep', value);
};
// 增加
const addStep = () => {
  step.value = step.value + 1;
  changeStep(step.value);
};

// 减少
const reduceStep = () => {
  step.value = step.value - 1;
  changeStep(step.value);
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.plusIcon {
  width: 33px;
  height: 33px;
  background-image: url('@/assets/images/map/plus.png');
  cursor: pointer;
  background-repeat: no-repeat;
}
.minusIcon {
  width: 27px;
  height: 27px;
  background-image: url('@/assets/images/map/minus.png');
  cursor: pointer;
  background-repeat: no-repeat;
}
.tooltip {
  position: absolute;
  left: -126px;
  bottom: -23px;
  color: #fff;
  padding-left: 14px;
  font-size: 32px;
  min-width: 80px;
  height: 63px;
  line-height: 63px;
  background-color: #3b71eb;
  text-align: center;
  &::before {
    content: '';
    width: 0;
    height: 0;
    border-bottom: 45px solid #3b71eb;
    border-left: 45px solid transparent;
    position: absolute;
    top: 9px;
    right: -22px;
    transform: rotate(-45deg);
  }
}
.slider {
  :deep(.el-slider__bar) {
    background: #1876be;
  }
  :deep(.el-slider__runway) {
    width: 9.66px;
    background: #1876be;
    border-radius: 4.5px 4.5px 4.5px 4.5px;
  }
  :deep(.el-slider__button-wrapper) {
    width: 48px;
    height: 48px;
    left: -20px;
  }
  :deep(.el-slider__button) {
    width: 48px;
    height: 48px;
    background: url('@/assets/images/map/dot.png') no-repeat;
    background-size: 100% 100%;
    border: none;
  }
}
</style>