vue-panzoom（推荐）

https://www.npmjs.com/package/vue-panzoom
https://kkgithub.com/thecodealer/vue-panzoom
vue 2.x只能使用1.1.3版本

npm install vue-panzoom@1.1.3

main.js

// import Vuejs
import Vue from 'vue'
import App from './App.vue'

// import vue-panzoom
import panZoom from 'vue-panzoom'

// install plugin
Vue.use(panZoom);

new Vue({
  render: h => h(App),
}).$mount('#app')

使用

<panZoom :options="{minZoom: 0.5, maxZoom: 5}">
  <p>You can zoom me</p>
</panZoom>

panzoom

安装

npm install panzoom --save

或者

yarn add panzoom

template

<div class="mainContainer" :style="styleObj" @mousedown="styleObj.cursor = 'grabbing'" @mouseup="styleObj.cursor = 'grab'">
  <div id="mainContainer"></div>
</div>

script

import panzoom from 'panzoom'

data

styleObj = {
  cursor: 'grab'
}

methods

initPanZoom() {
  const mainContainer = document.getElementById('mainContainer')
  const mainContainerWrap = mainContainer.parentNode
  const pan = panzoom(mainContainer, {
    smoothScroll: false,
    bounds: true,
    // autocenter: true,
    zoomDoubleClickSpeed: 1,
    minZoom: 0.2,
    maxZoom: 5,
  })
  this.jsPlumb.mainContainerWrap = mainContainerWrap
  this.jsPlumb.pan = pan
  // 缩放时设置jsPlumb的缩放比率
  pan.on('zoom', e => {
    const {scale} = e.getTransform()
    this.jsPlumb.setZoom(scale)
  })
}

mounted

this.initPanZoom()