我怎样才能暂停vue-panZoom

Question

我有一个带有vue-panZoom的网格

在它里面有一个vue-可拖-可调整大小区域，如下图所示

图像

当我拖动(vue-可拖动-可调整大小的)灰色正方形时，黑色(泛缩放)矩形也会移动。当选择灰色方块时，panZoom必须被锁定或处于beforeMouseDown & beforeWheel模式状态。

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

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

Pan缩放文档中也有这种方法，但我不知道它是否也能在vue中工作：

暂停/恢复窗格缩放--您可以通过调用以下方法暂停并继续窗格缩放：

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()
  }
}

示例