Javascript 如何在vue panzoom中实现zoomIn和zoomout

我正在尝试实现的手动缩放选项。 panzoom是父库和

这里演示的默认缩放就是我想要实现的

根据原始库（），有zoom、zoomIn和zoomOut函数

但该实例没有这些方法

到目前为止，我唯一能找到的方法是使用平滑缩放功能，我不知道如何使用它

this.$refs.panZoom.$panZoomInstance.smoothZoom(2.2);

这就是我到现在为止一直在尝试的

---

请看一看，任何建议都会很有帮助。

您可以在这里看到一个简单的实现，您可以轻松地使用道具和插槽创建自己的组件，在所有项目中都可以重用

<template>
    <div>
        <div class="command">
            <button @click="zoom(1)">ZoomIn</button>
            <button @click="zoom(-1)">ZoomOut</button>
        </div>
        <div style="overflow: hidden;">
            <div id="panzoom-element">
                <img src="https://picsum.photos/300">
            </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 : {
        zoom(level){
            level === -1 ? this.panzoom.zoomOut() : this.panzoom.zoomIn()
        }
    }
}

缩放
焦距调整
从“@Panzoom/Panzoom”导入Panzoom
导出默认值{
道具：{
选项：{type:Object，默认值：（）=>{}，
},
安装的（）{
this.panzoom=panzoom（document.getElementById（'panzoom-element'）{
最大刻度：5
})
},
方法：{
缩放（水平）{
level==-1？this.panzoom.zoomOut（）：this.panzoom.zoomIn（）
}
}
}

---

不能使用zoomIn/zoomOut函数，因为这些方法是在库和vue panzom实现中实现的。没有相同的库，也没有相同的函数。