vue panzoom 限制移动边界

如果你想在 Vue 中使用 panzoom 库来限制移动边界，可以使用 panzoom 库提供的 `contain` 选项。这个选项可以让你指定一个元素，使得 panzoom 元素不能移出这个元素的边界。

下面是一个例子，其中 panzoom 元素不能移出父级容器的边界：

<template>
  <div class="parent-container">
    <div ref="panzoomRef" class="panzoom">
      <!-- 这里是你要缩放和移动的内容 -->
    </div>
  </div>
</template>

<script>
import panzoom from 'panzoom'

export default {
  mounted() {
    const panzoomEl = this.$refs.panzoomRef

    const parentContainer = panzoomEl.parentElement

    panzoom(panzoomEl, {
      contain: 'inside',
      boundingBox: parentContainer.getBoundingClientRect()
    })
  }
}
</script>

<style>
.parent-container {
  width: 500px;
  height: 500px;
  position: relative;
  overflow: hidden;
}

.panzoom {
  width: 100%;
  height: 100%;
  position: absolute;
}
</style>

在上面的例子中，我们首先获取 panzoom 元素的引用，在 `mounted` 钩子函数中初始化 panzoom 库并传入 `contain` 和 `boundingBox` 参数。`contain` 的值为 `'inside'`，表示 panzoom 元素不能完全移出 `boundingBox` 指定的父级容器的边界。`boundingBox` 的值是通过 `parentContainer.getBoundingClientRect()` 获取的父级容器的边界。最后，我们给父级容器设置了固定的宽高和 `overflow: hidden` 属性，以限制 panzoom 元素的移动范围。

这样就可以在 Vue 中使用 panzoom 库来限制移动边界了。