Question

我正在学习如何使用名为Annotoriou s的Javascript图像注释库。我该如何在挂接钩子期间初始化库（假设这是发生库的最佳位置），而又不像现在那样用单独的方法对其进行初始化？

我有两种方法：（工作沙箱here）

PhotoDetail.vue

annotatePhoto() {
  try {
    const anno = new Annotorious({   <-------- how to get this out of this scope and into the global scope of this SFC?
      image: this.photo.id // image element or ID
    })
    // Attach listeners to handle annotation events
    anno.on('createAnnotation', annotation => {
      console.log('Created!', annotation)
    })
  } catch (error) {
    console.log('anno error', error)
  }
}

和

loadAnnotations() {
const anno = new Annotorious({   <-------- how to get this out of this scope and into the global scope of this SFC?
      image: this.photo.id // image element or ID
    })
          anno.setAnnotations(annotations) < --- this is undefined because of this scope
        })
    }

我尝试过：

  computed: {
    anno() {
      const anno = Annotorious.init({
        image: this.photo.id
      })
      return anno
    }
  }

谢谢！

Answer 1

这就是我要做的工作：

  data() {
    return {
      photo: {},
      anno: {}
    }
  },
  async mounted() {
    await this.getPhoto()
    this.anno = new Annotorious({ image: this.photo.id })
    this.annotatePhoto()

如何在挂接的钩子中而不是在单个方法中初始化代码？

1 个答案: