Remove event listeners when destory ImageCropper

This commit is contained in:
taehoon 2019-02-08 12:03:04 -05:00
parent 228e6681e3
commit ddfdaf3284

View File

@ -65,19 +65,12 @@ const ImageCropper = {
}, },
createCropper () { createCropper () {
this.cropper = new Cropper(this.$refs.img, this.cropperOptions) this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
}
}, },
mounted () { getTriggerDOM () {
// listen for click event on trigger return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
let trigger = typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger) },
if (!trigger) { readFile () {
this.$emit('error', 'No image make trigger found.', 'user') const fileInput = this.$refs.input
} else {
trigger.addEventListener('click', this.pickImage)
}
// listen for input file changes
let fileInput = this.$refs.input
fileInput.addEventListener('change', () => {
if (fileInput.files != null && fileInput.files[0] != null) { if (fileInput.files != null && fileInput.files[0] != null) {
let reader = new FileReader() let reader = new FileReader()
reader.onload = (e) => { reader.onload = (e) => {
@ -87,7 +80,28 @@ const ImageCropper = {
this.filename = fileInput.files[0].name || 'unknown' this.filename = fileInput.files[0].name || 'unknown'
this.$emit('changed', fileInput.files[0], reader) this.$emit('changed', fileInput.files[0], reader)
} }
}) }
},
mounted () {
// listen for click event on trigger
const trigger = this.getTriggerDOM()
if (!trigger) {
this.$emit('error', 'No image make trigger found.', 'user')
} else {
trigger.addEventListener('click', this.pickImage)
}
// listen for input file changes
const fileInput = this.$refs.input
fileInput.addEventListener('change', this.readFile)
},
beforeDestroy: function () {
// remove the event listeners
const trigger = this.getTriggerDOM()
if (trigger) {
trigger.removeEventListener('click', this.pickImage)
}
const fileInput = this.$refs.input
fileInput.removeEventListener('change', this.readFile)
} }
} }