zoom.vue 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. <!-- 放大缩小 -->
  2. <template>
  3. <div id="zoom">
  4. <i @click="sacle(1)" class="el-icon-zoom-in btn"></i>
  5. <span>{{ sliderValPercent }}</span>
  6. <i @click="sacle(0)" class="el-icon-zoom-out btn"></i>
  7. </div>
  8. </template>
  9. <script>
  10. import bus from "@/bus/bus";
  11. export default {
  12. props: ["scale"],
  13. data() {
  14. return {
  15. min: 0.1,
  16. max: 5,
  17. initScale: 1, //初始 底图缩放比例
  18. sliderVal: 1, // 缩放比例
  19. };
  20. },
  21. computed: {
  22. sliderValPercent() {
  23. return `${(this.sliderVal * 100).toFixed(0)}%`;
  24. },
  25. },
  26. methods: {
  27. sacle(data) {
  28. const oldV = this.sliderVal;
  29. if (data) {
  30. this.sliderVal = Number((this.sliderVal + 0.1).toFixed(1));
  31. if (this.sliderVal > this.maxScale) {
  32. this.sliderVal = this.maxScale;
  33. }
  34. bus.$emit("scale", this.sliderVal, oldV);
  35. } else {
  36. this.sliderVal = Number((this.sliderVal - 0.1).toFixed(1));
  37. if (this.sliderVal < this.min) {
  38. this.sliderVal = this.min;
  39. }
  40. bus.$emit("scale", this.sliderVal, oldV);
  41. }
  42. },
  43. /**
  44. * @name getMouseScale
  45. * @description 滚轮滚动,导致的底图缩放比例 逻辑处理
  46. */
  47. getMouseScale() {
  48. // zoom 为缩放后改变的比例
  49. bus.$off("mouseScale");
  50. bus.$on("mouseScale", (zoom) => {
  51. const s = Number((zoom * this.initScale).toFixed(2));
  52. this.sliderVal = s > 0.1 ? s : 0.1;
  53. });
  54. },
  55. },
  56. mounted() {
  57. this.getMouseScale();
  58. },
  59. };
  60. </script>
  61. <style lang="less">
  62. #zoom {
  63. color: #646a73;
  64. .btn {
  65. cursor: pointer;
  66. font: 18px;
  67. }
  68. }
  69. </style>