<NME> mpvue-cropper.vue
<BEF> <template>
  <canvas
      canvas-id="__mpvue_cropper__"
      @touchstart="touchstart"
      @touchmove="touchmove"
      @touchend="touchend"
      @touchend="touchend"
      disable-scroll
      :style="{ width: _width + 'px', height: _height + 'px', background: 'rgba(0, 0, 0, .8)' }">
  </canvas>
  <canvas
<script>
  import WeCropper from 'we-cropper'

  const CANVAS_ID = '__mpvue_cropper__'

  export default {
    name: 'mpvue-cropper',
      width: _width * _pixelRatio + 'px',
      height: _height * _pixelRatio + 'px'
        type: Object
      }
    },
    data () {
      return {
        _we_cropper: null
      }
    },
    computed: {
      _width () {
        return this.option.width
      },
    props: {
      option: {
        type: Object
    },
    methods: {
      touchstart ($event) {
        this._we_cropper.touchStart($event.mp)
      },
      touchmove ($event) {
        this._we_cropper.touchMove($event.mp)
      },
      touchend ($event) {
        this._we_cropper.touchEnd($event.mp)
      },
      pushOrigin (src) {
        this._we_cropper.pushOrign(src)
      },
      updateCanvas () {
        this._we_cropper.updateCanvas()
      },
      getCropperBase64 () {
        return new Promise((resolve, reject) => {
          this._we_cropper.getCropperImage(src => {
            src ? resolve(src) : reject()
          })
        })
      },
      getCropperImage () {
        return new Promise((resolve, reject) => {
          this._we_cropper.getCropperImage(src => {
            src ? resolve(src) : reject()
          })
        })
      }
    },
    mounted () {
      this._we_cropper = new WeCropper(Object.assign(this.option, {
        id: CANVAS_ID
      }))
        .on('ready', (...args) => {
      updateCanvas () {
        this._wecropper.updateCanvas()
      },
      getCropperBase64 (fn) {
        return this._wecropper.getCropperBase64(fn)
      },
      getCropperImage (opt, fn) {
        return this._wecropper.getCropperImage(opt, fn)
      },
      init () {
        this._wecropper = new WeCropper(Object.assign(this.option, {
          id: this._canvasId,
          targetId: this._targetId,
          pixelRatio: this._pixelRatio
        }))
        .on('ready', (...args) => {
          this.$emit('ready', ...args)
        })
        .on('beforeImageLoad', (...args) => {
          this.$emit('beforeImageLoad', ...args)
        })
        .on('imageLoad', (...args) => {
          this.$emit('imageLoad', ...args)
        })
        .on('beforeDraw', (...args) => {
          this.$emit('beforeDraw', ...args)
        })
      }
    },
    onLoad () {
      if (!this.option) {
        return console.warn('[mpvue-cropper] 请传入option参数\n参数配置见文档：https://we-plugin.github.io/we-cropper/#/api')
      }
      this.init()
    }
  }
</script>
<MSG> [fix](package): fixed mpvue-cropper handle error

<DFF> @@ -1,6 +1,7 @@
 <template>
   <canvas
-      canvas-id="__mpvue_cropper__"
+      v-if="_canvasId"
+      :canvasId="_canvasId"
       @touchstart="touchstart"
       @touchmove="touchmove"
       @touchend="touchend"
@@ -12,7 +13,7 @@
 <script>
   import WeCropper from 'we-cropper'
 
-  const CANVAS_ID = '__mpvue_cropper__'
+  let _wecropper
 
   export default {
     name: 'mpvue-cropper',
@@ -21,12 +22,10 @@
         type: Object
       }
     },
-    data () {
-      return {
-        _we_cropper: null
-      }
-    },
     computed: {
+      _canvasId () {
+        return this.option.canvasId
+      },
       _width () {
         return this.option.width
       },
@@ -36,37 +35,37 @@
     },
     methods: {
       touchstart ($event) {
-        this._we_cropper.touchStart($event.mp)
+        _wecropper.touchStart($event.mp)
       },
       touchmove ($event) {
-        this._we_cropper.touchMove($event.mp)
+        _wecropper.touchMove($event.mp)
       },
       touchend ($event) {
-        this._we_cropper.touchEnd($event.mp)
+        _wecropper.touchEnd($event.mp)
       },
       pushOrigin (src) {
-        this._we_cropper.pushOrign(src)
+        _wecropper.pushOrign(src)
       },
       updateCanvas () {
-        this._we_cropper.updateCanvas()
+        _wecropper.updateCanvas()
       },
       getCropperBase64 () {
         return new Promise((resolve, reject) => {
-          this._we_cropper.getCropperImage(src => {
+          _wecropper.getCropperImage(src => {
             src ? resolve(src) : reject()
           })
         })
       },
       getCropperImage () {
         return new Promise((resolve, reject) => {
-          this._we_cropper.getCropperImage(src => {
+          _wecropper.getCropperImage(src => {
             src ? resolve(src) : reject()
           })
         })
       }
     },
     mounted () {
-      this._we_cropper = new WeCropper(Object.assign(this.option, {
+      _wecropper = new WeCropper(Object.assign(this.option, {
         id: CANVAS_ID
       }))
         .on('ready', (...args) => {

[fix](package): fixed mpvue-cropper handle error