我如何暂停 vue-panZoom

编程问答 2022-05-02

问题描述

我有一个带有 vue-panZoom

的网格

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

Image

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

<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

我该如何解决？提前致谢

解决方法

是的，这些方法应该适用于 Vue.js。您所要做的就是通过参考访问 $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

javascriptpanzoomvue.jsvuedraggable