<vue-cropper
ref="cropper"
:src="imgSrc"
:ready="cropImage"
:zoom="cropImage"
:cropmove="cropImage"
style="width: 100%; height: 400px"
></vue-cropper>
const cropper = ref(null);
const setImage = (e) => {
const file = e.target.files[0];
if (!file.type.includes("image/")) {
return;
}
const reader = new FileReader();
reader.onload = (event) => {
dialogVisible.value = true;
imgSrc.value = event.target.result;
cropper.value && cropper.value.replace(event.target.result);
};
reader.readAsDataURL(file);
};
为什么需要在vue-cropper组件里定义一个ref属性呢
因为你在这里调用了这个组件暴露的方法:
对于在
setup
中如何引用模版,可以看官方文档:https://v3.cn.vuejs.org/guide...