mirror of
https://gitee.com/beijing_hongye_huicheng/lilishop-ui.git
synced 2026-11-07 17:38:55 +08:00
3cb60139d5
- 抽离通用 useTable composable，并迁移 13 个典型列表页（采购/报损/订单/售后/统计/营销等） - 增加表格与树组件全局空状态 (el-empty) 样式规范 - 补齐视图图片语义化 alt，并添加全局图片加载异常 SVG 占位兜底 - 替换遗留的 $Message 兼容语法为 ElMessage - 将 WAP 店铺装修模板的 Options API 统一为 defineOptions - 优化数据报表卡片视觉样式，并移除失效的品牌筛选选项 - 清理冗余依赖 vuex，将 sass-loader 调整至 devDependencies
32 lines
1.2 KiB
JavaScript
32 lines
1.2 KiB
JavaScript
/**
|
||
* 全局图片加载失败占位：
|
||
* 在捕获阶段监听 <img> 的 error 事件（error 不冒泡），失败时替换为内联 SVG 占位图。
|
||
* - 每张图片只替换一次，占位图自身加载失败不会再次触发，避免死循环
|
||
* - 空 src 不处理
|
||
* - 需要自行处理 error 的图片可添加 data-no-fallback 属性跳过
|
||
*/
|
||
const PLACEHOLDER =
|
||
"data:image/svg+xml;utf8," +
|
||
encodeURIComponent(
|
||
"<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='#c0c4cc' stroke-width='2' stroke-linejoin='round'>" +
|
||
"<rect width='64' height='64' fill='#f5f7fa' stroke='none'/>" +
|
||
"<rect x='14' y='18' width='36' height='28' rx='3'/>" +
|
||
"<circle cx='25' cy='28' r='3'/>" +
|
||
"<path d='M14 42l10-9 8 7 6-5 12 9'/></svg>"
|
||
);
|
||
|
||
export function setupImgFallback() {
|
||
document.addEventListener(
|
||
"error",
|
||
(event) => {
|
||
const el = event.target;
|
||
if (!el || el.tagName !== "IMG") return;
|
||
if (el.dataset.noFallback !== undefined || el.dataset.fallbackApplied) return;
|
||
if (!el.getAttribute("src")) return;
|
||
el.dataset.fallbackApplied = "1";
|
||
el.src = PLACEHOLDER;
|
||
},
|
||
true
|
||
);
|
||
}
|