|
@@ -2,20 +2,59 @@
|
|
|
<template>
|
|
|
<div id="zoom">
|
|
|
<i @click="sacle(1)" class="el-icon-zoom-in btn"></i>
|
|
|
- <span>{{Math.floor(scale * 100)}}%</span>
|
|
|
+ <span>{{ sliderValPercent }}</span>
|
|
|
<i @click="sacle(0)" class="el-icon-zoom-out btn"></i>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
+import bus from "@/bus/bus";
|
|
|
export default {
|
|
|
props: ["scale"],
|
|
|
data() {
|
|
|
- return {};
|
|
|
+ return {
|
|
|
+ min: 0.1,
|
|
|
+ max: 5,
|
|
|
+ initScale: 1, //初始 底图缩放比例
|
|
|
+ sliderVal: 1, // 缩放比例
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ sliderValPercent() {
|
|
|
+ return `${(this.sliderVal * 100).toFixed(0)}%`;
|
|
|
+ },
|
|
|
},
|
|
|
methods: {
|
|
|
sacle(data) {
|
|
|
- this.$emit("sacle", data);
|
|
|
+ const oldV = this.sliderVal;
|
|
|
+ if (data) {
|
|
|
+ this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
|
|
|
+ if (this.sliderVal > this.maxScale) {
|
|
|
+ this.sliderVal = this.maxScale;
|
|
|
+ }
|
|
|
+ bus.$emit("scale", this.sliderVal, oldV);
|
|
|
+ } else {
|
|
|
+ this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
|
|
|
+ if (this.sliderVal < this.min) {
|
|
|
+ this.sliderVal = this.min;
|
|
|
+ }
|
|
|
+ bus.$emit("scale", this.sliderVal, oldV);
|
|
|
+ }
|
|
|
},
|
|
|
+ /**
|
|
|
+ * @name getMouseScale
|
|
|
+ * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
|
|
|
+ */
|
|
|
+ getMouseScale() {
|
|
|
+ // zoom 为缩放后改变的比例
|
|
|
+ bus.$off("mouseScale");
|
|
|
+ bus.$on("mouseScale", (zoom) => {
|
|
|
+ const s = Number((zoom * this.initScale).toFixed(2));
|
|
|
+ this.sliderVal = s > 0.1 ? s : 0.1;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getMouseScale();
|
|
|
},
|
|
|
};
|
|
|
</script>
|