我怎样才能暂停 vue-panZoom

Question

我有一个带有 vue-panZoom

的网格

Image

当我拖动（vue-draggable-resizable）灰色方块时，黑色（pan-zoom）矩形也会移动。选中灰色方块时，panZoom必须锁定或处于beforeMouseDown & beforeWheel模式状态。

<panZoom :options="{transformOrigin: null, beforeWheel, beforeMouseDown}">

<vue-draggable-resizable ***@dragging="onDrag"*** ref="draggable" :active="true"  @dragstop="updatePreview" @resizestop="updatePreview">

panzoom 文档中也有这个方法，但我不知道它是否也适用于 vue:

Pause/resume the panzoom You can pause and resume the panzoom by calling the following methods:

var element = document.getElementById('scene');
var instance = panzoom(element);

instance.isPaused(); //  returns false
instance.pause();    //  Pauses event handling
instance.isPaused(); //  returns true now
instance.resume();   //  Resume panzoom
instance.isPaused(); //  returns false again

我该如何解决？提前致谢

Answer 1

是的，这些方法应该适用于 Vue.js。您所要做的就是通过 ref.

访问 $panZoomInstance

<pan-zoom ref='panZoom'>
  <img src="https://picsum.photos/300">
</pan-zoom>

methods: {
  pause() {
    this.$refs.panZoom.$panZoomInstance.pause()
  },
  resume() {
    this.$refs.panZoom.$panZoomInstance.resume()
  }
}

Example

我怎样才能暂停 vue-panZoom

how can i Pause vue-panZoom

javascript

vue.js

vuejs2

vuedraggable

panzoom