fix: 头像异常时无法一直Loading 无法裁剪

This commit is contained in:
dap 2025-04-05 16:51:24 +08:00
parent 78c16c1016
commit 84d6559f25
2 changed files with 15 additions and 3 deletions

View File

@ -84,6 +84,10 @@ function handleReady(cropperInstance: Cropper) {
modalLoading(false); modalLoading(false);
} }
function handleReadyError() {
modalLoading(false);
}
function handlerToolbar(event: string, arg?: number) { function handlerToolbar(event: string, arg?: number) {
if (event === 'scaleX') { if (event === 'scaleX') {
scaleX = arg = scaleX === -1 ? 1 : -1; scaleX = arg = scaleX === -1 ? 1 : -1;
@ -128,9 +132,11 @@ async function handleOk() {
v-if="src" v-if="src"
:circled="circled" :circled="circled"
:src="src" :src="src"
crossorigin="anonymous"
height="300px" height="300px"
@cropend="handleCropend" @cropend="handleCropend"
@ready="handleReady" @ready="handleReady"
@ready-error="handleReadyError"
/> />
</div> </div>
@ -322,7 +328,8 @@ async function handleOk() {
&-cropper { &-cropper {
height: 300px; height: 300px;
background: #eee; background: #eee;
background-image: linear-gradient( background-image:
linear-gradient(
45deg, 45deg,
rgb(0 0 0 / 25%) 25%, rgb(0 0 0 / 25%) 25%,
transparent 0, transparent 0,

View File

@ -26,14 +26,14 @@ const props = defineProps({
src: { required: true, type: String }, src: { required: true, type: String },
}); });
const emit = defineEmits(['cropend', 'ready', 'cropendError']); const emit = defineEmits(['cropend', 'ready', 'cropendError', 'readyError']);
const defaultOptions: Options = { const defaultOptions: Options = {
aspectRatio: 1, aspectRatio: 1,
autoCrop: true, autoCrop: true,
background: true, background: true,
center: true, center: true,
checkCrossOrigin: true, checkCrossOrigin: false,
checkOrientation: true, checkOrientation: true,
cropBoxMovable: true, cropBoxMovable: true,
cropBoxResizable: true, cropBoxResizable: true,
@ -94,6 +94,11 @@ async function init() {
if (!imgEl) { if (!imgEl) {
return; return;
} }
// 访
const resp = await fetch(props.src);
if (resp.status !== 200) {
emit('readyError');
}
cropper.value = new Cropper(imgEl, { cropper.value = new Cropper(imgEl, {
...defaultOptions, ...defaultOptions,
crop() { crop() {