123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869 |
- <!-- 放大缩小 -->
- <template>
- <div id="zoom">
- <i @click="sacle(1)" class="el-icon-zoom-in btn"></i>
- <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 {
- min: 0.1,
- max: 5,
- initScale: 1, //初始 底图缩放比例
- sliderVal: 1, // 缩放比例
- };
- },
- computed: {
- sliderValPercent() {
- return `${(this.sliderVal * 100).toFixed(0)}%`;
- },
- },
- methods: {
- 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>
- <style lang="less">
- #zoom {
- color: #646a73;
- .btn {
- cursor: pointer;
- font: 18px;
- }
- }
- </style>
|