[英]Vue panzoom container
I would like to use this plug in to zoom and pan around a number of other components but am struggling to work out the best way to implement我想使用这个插件来缩放和平移许多其他组件,但我正在努力找出实现的最佳方法
https://github.com/timmywil/panzoom It looks like a good library to use https://github.com/timmywil/panzoom看起来是一个很好用的库
I have only just started playing but my assumption was to make a basic component我才刚刚开始玩,但我的假设是制作一个基本组件
<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>
I then in my Home.vue (view) to wrap the zoom component around the others然后我在我的 Home.vue(视图)中将缩放组件包裹在其他组件周围
<PanzoomLayer>
<NodesLayer />
<TipsLayer />
<ConnectionsLayer />
</PanzoomLayer>
This didnt seem to do anything :) Can someone point me in the right direction please ?这似乎没有做任何事情:) 有人可以指出我正确的方向吗? Thanks谢谢
I would like to use this plug in to zoom and pan around a number of other components but am struggling to work out the best way to implement我想使用此插件来缩放和平移许多其他组件,但仍在努力寻找实现的最佳方法
https://github.com/timmywil/panzoom It looks like a good library to use https://github.com/timmywil/panzoom看起来像是一个很好的库
I have only just started playing but my assumption was to make a basic component我才刚刚开始玩,但是我的假设是制作一个基本组成部分
<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>
I then in my Home.vue (view) to wrap the zoom component around the others然后,我在Home.vue(视图)中将缩放组件包裹在其他组件周围
<PanzoomLayer>
<NodesLayer />
<TipsLayer />
<ConnectionsLayer />
</PanzoomLayer>
This didnt seem to do anything :) Can someone point me in the right direction please ?这似乎什么都没做:)有人可以指出我正确的方向吗? Thanks谢谢
It works good for me:它对我很有用:
<template>
<div ref="panzoomElement">
<slot />
</div>
</template>
mounted() {
this.$nextTick(() => {
this.panzoom = Panzoom(this.$refs.panzoomElement, {
maxScale: 5,
});
});
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.