支持自定义重试次数,支持重试回调,支持重试使用备用域名。 这里使用自定义指令做了封装,可读性MAX!!!
运行截图 调用方式
ini
<img
v-useReload="{
src: 'https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f.png',
callback: (e, count) => {
console.log('重试次数:', count, e);
},
}"
src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
/>
<img
v-useReload="reload"
src="https://user-images.githubusercontent.com/10731096/95823103-9ce15780-0d5f-11eb-8010-1bd1b5910d4f2.png"
/>
话不多说直接上代码
ini
/**
* Description
* 方式一:<DOM v-useReload />
* 方式二:<DOM v-useReload="{errorImg,maxRetries,src,callback}" />
* 方式三:<DOM v-useReload="callback" />
* @author ZHYCH
* @date 2024-12-27
* @param {any} el:HTMLElement
* @param {any} binding:DirectiveBinding<option>
* @returns {any}
*/
import { DirectiveBinding } from 'vue';
import errorimg from '@/assets/imgerror.svg';
type callback = (retryCount: number) => void;
interface option {
errorSrc?: string; //失败地址
maxRetries?: number; // 最大重试次数
src?: string; //备用地址
callback?: callback; //失败回调
}
export default {
beforeMount(el: HTMLElement, binding: DirectiveBinding<option | null | callback>) {
const { value } = binding;
const isObject = typeof value === 'object' && value !== null;
const maxRetries = value?.maxRetries ?? 3;
const src = value?.src ?? el.src;
const errorSrc = value?.errorImg ?? errorimg;
const callback = isObject ? value?.callback : value;
let retryCount = 0; // 当前重试次数
const reloadImage = () => {
if (retryCount < maxRetries) {
retryCount++;
el.src = '';
setTimeout(() => {
callback?.(el, retryCount);
el.src = src;
}, 0);
} else {
el.src = errorSrc;
}
};
el.addEventListener('error', reloadImage);
// 清理事件监听器
el._reloadImage = reloadImage;
},
unmounted(el: HTMLElement) {
el.removeEventListener('error', el._reloadImage);
},
};