rt-sim-training-client/src/views/jlmap/zoom/zoom.vue

<template>
  <div class="zoom-box" :style="{top: offset+'px'}">
    <el-button class="shrink zoom" :disabled="scaleRate == 0.8" @click="setShrinkCanvas">
      <i class="el-icon-minus" />
    </el-button>
    <el-button class="magnify zoom" :disabled="scaleRate == 8" @click="setMagnifyCanvas">
      <i class="el-icon-plus" />
    </el-button>
  </div>
</template>
<script>
export default {
	name: 'ZoomBox',
	props: {
		scaleRate: {
			type: String,
			default() {
				return '1';
			}
		}
	},
	data() {
		return {
			offset: 15
		};
	},
	watch: {
		'$store.state.config.menuBarLoadedCount': function (val) {
			this.$nextTick(() => {
				this.setPosition();
			});
		}
	},
	methods: {
		setPosition() {
			this.$nextTick(() => {
				let offset = 15;
				const menuBar = document.getElementById('menuBar');
				const menuTool = document.getElementById('menuTool');

				if (menuBar) {
					offset += (menuBar.offsetHeight || 0);
				}

				if (menuTool) {
					offset += (menuTool.offsetHeight || 0);
				}

				if (this.offset != offset) {
					this.offset = offset;
				}
			});
		},
		setShrinkCanvas() {
			this.$emit('setShrink');
		},
		setMagnifyCanvas() {
			this.$emit('setMagnify');
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .zoom-box {
        z-index: 7;
        position: absolute;
        left: 20px;
        width: 120px;
        height: 32px;
        background: rgb(224, 223, 223);
        border-radius: 4px;
        overflow: hidden;

        .zoom {
            width: 50%;
            float: left;
            height: 100%;
            margin: 0;
            padding: 0;
            border-radius: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            outline: none;
            color: #333;

            i {
                color: #000;
                font-size: 18px;
                font-weight: 900;
            }
        }

        .shrink {
            border-right: 1px solid #333;
        }
    }
</style>