In Vue advanced cropper , the moving class (vue-rectangle-stencil–moving) is not removing automatically when I stop moving the mouse, but if I refresh the page once means , it is removing automatically and working as expected.
I am using vue 2, vue advanced cropper version 1.11.6, there is no error message in console.
My code:
<template>
<div>
<b-sidebar id="car-all-details" title="Sidebar with backdrop" backdrop right no-header prop no-close-on-esc no-close-on-backdrop>
<div class="cropper_container d-flex w-100 mt-5">
<div class="ml-3 w-50">
<cropper
ref="cropper"
class="upload-example-cropper cropper"
:src="image"
@change="cropperChangedNew"
:maxWidth="sizeRestriction.maxWidth"
:minWidth="sizeRestriction.minWidth"
:maxHeight="sizeRestriction.maxHeight"
:minHeight="sizeRestriction.minHeight"
/>
</div>
</div>
</b-sidebar>
</div>
</template>
<script>
import Vue from "vue";
import { Cropper } from 'vue-advanced-cropper'
import 'vue-advanced-cropper/dist/style.css';
Vue.use(Cropper);
export default {
data(){
return {
croppedFinalImg : ''
}
},
props: ["image", "sizeRestriction"],
components: {
Cropper
},
methods:{
cropperChangedNew({ canvas }) {
this.croppedFinalImg = canvas.toDataURL()
},
},
mounted(){
this.$refs.cropper.refresh()
this.$root.$emit('bv::toggle::collapse', 'car-all-details')
},
}
</script>
I tried to remove the class manually both by code and removing in dev tools , even removing the class, it is not working.