问题描述
我想使用此插件来缩放和平移许多其他组件,但仍在努力寻找实现的最佳方法
https://github.com/timmywil/panzoom 看起来像是一个很好的库
我才刚刚开始玩,但是我的假设是制作一个基本组件
<template>
<div>
<div style="overflow: hidden">
<div id="panzoom-element">
<slot />
</div>
</div>
</div>
</template>
<script>
import Panzoom from '@panzoom/panzoom'
export default {
props: {
options: { type: Object,default: () => {} },},mounted() {
this.panzoom = Panzoom(document.getElementById('panzoom-element'),{
maxScale: 5,})
},methods: {},}
</script>
然后我在Home.vue(视图)中将缩放组件包裹在其他组件上
<PanzoomLayer>
<NodesLayer />
<TipsLayer />
<ConnectionsLayer />
</PanzoomLayer>
这似乎什么也没做:) 有人可以指出我正确的方向吗? 谢谢
解决方法
也许您可以尝试使用同一库的vue包装器。 vue-panzoom
,它对我很有用:
<template>
<div ref="panzoomElement">
<slot />
</div>
</template>
mounted() {
this.$nextTick(() => {
this.panzoom = Panzoom(this.$refs.panzoomElement,{
maxScale: 5,});
});
},