如何解决Vue Panzoom容器
我想使用此插件来缩放和平移许多其他组件,但仍在努力寻找实现的最佳方法
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,});
});
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。