vue2 && ts && vue-cli/webpack 项目中 getCropData 出错

[alexsunday]

使用 vue create 建立的项目，ts+vue2+vue-cli 使用 vue-cropper@0.5.11 ，简单重现方式：

<template>
  <div class="app">
    <p>图片限制容器内</p>
    <button @click="done">done</button>
    <div class="container">
      <vue-cropper
        center-wrapper
        ref="cropper"
        img="https://p3-pc.douyinpic.com/aweme/1080x1080/aweme-avatar/tos-cn-avt-0015_2f07496a52314c3e024eaafaba73dd35.jpeg"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Ref, Vue } from "vue-property-decorator";

@Component
export default class App extends Vue {
  @Ref()
  cropper!: any;

  done() {
    // Compiled with problems: t is not a function
    this.cropper.getCropData();
  }
}
</script>

<style scoped lang="scss">
.container {
  width: 500px;
  height: 768px;
}
</style>

实际上，似乎与 ts 也无关，用这个js 示例也是一样，换0.4.9 也一样：

<template>
  <div class="app">
    <p>图片限制容器内</p>
    <button @click="done">done</button>
    <div class="container">
      <vue-cropper
        center-wrapper
        ref="cropper"
        img="https://p3-pc.douyinpic.com/aweme/1080x1080/aweme-avatar/tos-cn-avt-0015_2f07496a52314c3e024eaafaba73dd35.jpeg"
      />
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    done() {
      this.$refs.cropper.getCropData();
    }
  }
}
</script>

<style scoped>
.container {
  width: 500px;
  height: 768px;
}
</style>

[xyxiao001]

应该是和 vue-property-decorator 库有关吧，我去看看 https://codesandbox.io/s/nice-chandrasekhar-mm53jw?file=/src/App.vue 直接用这个是没啥问题的

[Hermione531]

一年了，解决了嘛？

[Hermione531]

一年了，解决了嘛？

找到问题了... 示例找错了... 要传 callback...