javascript - 我怎样才能暂停 vue-panZoom

Question

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

里面有一个vue-draggable-resizable区域，如下图所示

图片

当我拖动（vue-draggable-resizable）灰色正方形时，黑色（平移缩放）矩形也会移动。when the gray square is selected, the panZoom must be locked or in the beforeMouseDown & beforeWheel mode state.

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

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

panzoom 文档中也有这种方法，但我不知道它是否也可以在 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。您所要做的就是$panZoomInstance通过 ref 访问。

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

例子