如何完全销毁组件关闭的功能？

Question

我有一个 vue 应用程序表单，其中有一个图像上传器。它有子组件，其中携带从 ant-design 上传的图像上传后裁剪图像的功能。它在上传和裁剪过程中正常工作。问题是它只在用户第一次上传图片时有效。但是第二次上传图片，crop canvas 还是使用第一张需要裁剪的图片。所以我在关闭或保存时破坏了功能 this.cropper.destroy() 它以某种方式工作了一点但仍然有错误，第二次上传将使用第一张图片，第三次上传将使用第二张图片，第四次上传将使用第三张图像等。如果这个错误仍然存在，它将对用户不友好。我在这里显示我的子组件代码，我希望它在组件销毁时完全销毁。

<template>
<div>
    <a-row :gutter="16">
        <a-col :span="12">
            <img ref="image" :src="initialImage">
        </a-col>
        <a-col :span="12" align="center">
            <p><strong>Preview</strong></p>
            <img :src="updatedImage" class="preview-image">
        </a-col>
    </a-row>
    <br />
    <a-row :gutter="16">
        <a-button type="primary" style="float: right;" @click="crop">Crop</a-button>
        <a-button style="float: right; margin-right: 5px;" @click="cancel">Cancel</a-button>
    </a-row>
</div>
</template>
<script>
import Cropper from 'cropperjs';

export default {
  name: 'PostCropper',
  props: {
    uploadedImage: String,
  },
  data() {
    return {
      cropper: {},
      updatedImage: {},
      image: {},
      initialImage: this.uploadedImage,
    };
  },
  methods: {
    crop() {
      this.$emit('update-image', this.updatedImage);
      this.cropper.destroy();
    },
    cancel() {
      this.$emit('cancel-upload');
      this.cropper.destroy();
    },
    cropImage() {
      this.image = this.$refs.image;
      this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1,
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.updatedImage = canvas.toDataURL('image/png');
        },
      });
    },
  },
  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropImage();
    },
  },
  mounted() {
    this.cropImage();
  },
};
</script>

<style scoped>
  .preview-image {
    border-radius:100px;
    width:150px;
    height:150px;
  }
</style>

实际上我需要为此做些什么 this.cropper 在页面关闭时完全销毁？或者我可以做些什么来克服这个问题？

Answer 1

  watch: {
    uploadedImage() {
      this.initialImage = this.uploadedImage;
      this.cropper.destroy(); //==> use destroy function here
      this.cropImage();
    },
  },

Answer 2

我没有销毁裁剪器，而是用 v-if 销毁了整个子组件，所以当单击按钮时它将重新安装组件

如何完全销毁组件关闭的功能？

how to completely destroy a function on component closed?

html

javascript

vue.js

antd

cropperjs