放大缩小

说明

对于需要动态设置高度或者来产生滚动条的情况非常实用

例子

标记 1

<!--
 * @Author: zhang
 * @Date: 2022-08-10 16:39:30
 * @Description: 放大缩小组件
-->
<template>
      <zoom ref="zoomComponent"
          :spots="spots"
          :imgUrl="imgUrl"
          :scaleOption="scaleOption"
          style="color: #4473b7">

      <div class="spot"
           slot="spot"
           slot-scope="scope">
        标记 {{scope.index + 1}}
      </div>

      <div slot="button"
           class="button">
        <el-button @click="handleZoom('enlarged')">放大</el-button>
        <el-button @click="handleZoom('reduce')">缩小</el-button>
        <el-button @click="handleRotate">旋转</el-button>
        <el-button @click="handleRest">还原</el-button>
      </div>
    </zoom>
</template>

<script>
const imgUrl = require('./mapTest.png')
export default {
  data () {
    return {
      imgUrl,
      spots: [
        {
          left: 50,
          top: 30
        }
      ],
      scaleOption: {
        width: 800,
        height: 500
      }
    }
  },
  methods: {
    handleZoom(type) {
      this.$refs.zoomComponent.handleZoom(type)
    },
    handleRotate() {
      this.$refs.zoomComponent.handleRotate()
    },
    handleRest() {
      this.$refs.zoomComponent.handleRest()
    }
  }
}
</script>

<style>

</style>

显示代码

wocwin微信二维码

参数配置

• imgSrc 图片路径