100 lines
2.0 KiB
Vue
100 lines
2.0 KiB
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>
|