Question

我最近一直在使用VueJS，并且正在尝试将其与另一个名为panzoom的JS库集成。该库运行良好，但是我在整个项目中都无法重用它的一个实例。

使用一个简单的原始JS文件，我可以创建一个变量（const）并像这样初始化其中的实例：

const myInstance = panzoom(document.getElementById('canvas'));

然后我以后可以通过myInstance.pause()或myInstance.resume()访问它。

VueJS将如何存储和检索外部库的实例（即称为函数的变量）？

这是我尝试过的：

Main.js

import Vue from 'vue'
import App from './App.vue'
import panzoom from "panzoom" // External library

// Make the panzoom library accessible
Vue.prototype.$panzoom = panzoom;

new Vue({
  el: "#app",
  store,
  render: h => h(App)
})

App.vue

<template>
  <div ref="canvas"></div>
</template>

import Artboards from '../Artboards.vue'

export default {
  name: "app",
  components: {
    Artboards
  },
  mounted() {
    // Trigger the Vue instance's $panzoom function
    // Using "const =" will not fix the problem
    this.$panzoom(this.$refs.canvas); // <-- How can I access this later?
  }
};

Artboards.vue

export default {
  name: "Artboards",
  methods: {
    resize() {
      this.$panzoom.pause() 
      // ^ Pause the object that panzoom() was initialized on (in App.vue)
      // This currently throws an error about this.$panzoom.pause() not being a function
    }
  }
}

访问存储在VueJS中的外部库实例

0 个答案: