Vue 3正在加载svgPanZoom的脚本，但未定义函数

Question

遵循项目的github中的说明，但以下代码不起作用。获取错误=“未捕获(在promise中) ReferenceError:未定义svgPanZoom”

注意到在网络选项卡中正在加载相应的脚本。在非vue站点中使用它，它可以正常工作。

<script>
export default {
  name: 'Map',
  data() {
    return {
      
    };
  },
  mounted() {
    this.$loadScript('https://unpkg.com/panzoom@9.4.0/dist/panzoom.min.js').then(() => {
      // Script is loaded, do something
       var element = document.getElementById('mapsvg');

  // and forward it it to panzoom.
  panzoom(element);
      //console.log('loaded.');
    });
  },
};
</script>

#mapsvg是包含在具有该id的模板中的svg。

我敢肯定，作为一个javascript新手，我遗漏了一些明显的东西。HALP PLZ :)

Answer 1

对于vue，最好使用现成的svgpanzoom模块。

安装包: npm I vue-svg-pan-zoom

要使用以下命令：

<template>
   <SvgPanZoom 
     style="width: 500px; height: 500px; border:1px solid black;"
     :zoomEnabled="true"
     :controlIconsEnabled="true"
     :fit="false"
     :center="true"
     >
     <svg>
        <circle x="10" y="10" r="5" />
     </svg>
    </SvgPanZoom>`
 </template>

 <script>
   import SvgPanZoom from 'vue-svg-pan-zoom';
   export default {
     components: {  SvgPanZoom },
    };
 </script>

https://www.npmjs.com/package/vue-svg-pan-zoom

Answer 2

已通过更改为正确的函数进行更正：

 var element = document.getElementById('mapsvg');

      // and forward it it to panzoom.
      panzoom(element);