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

96 lines
2.0 KiB
Vue
Raw Normal View History

2019-07-25 10:30:30 +08:00
<template>
<div class="zoom-box" :style="{top: offset+'px'}">
<el-button class="shrink zoom" :disabled="scaleRate == 1" @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,
required: true
}
},
data() {
return {
offset: 15
};
},
watch: {
'$store.state.config.menuBarLoadedCount': function (val) {
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>