fix: 头像异常时无法一直Loading 无法裁剪
This commit is contained in:
parent
78c16c1016
commit
84d6559f25
@ -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,
|
||||||
|
@ -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() {
|
||||||
|
Loading…
Reference in New Issue
Block a user