通过表格原生渲染统一生成手机布局标签,删除全页监听与后补扫描。动态等级列使用单一标题并保留颜色。 补齐首次插入、深链刷新、动态表头与首页延迟响应几何回归。全量214项通过,最终专项16项通过;不声明全站所有场景零位移。
This commit is contained in:
1 parent
30cbfd3a9c
commit
1c0c0f16bc
6 files changed
+241
-58
No files matched your search
@@ -1,36 +0,0 @@
|
||||
/** 窄屏把表格行堆叠成卡片时,用列标题给每个单元格补 data-label,供 CSS 显示字段名。 */
|
||||
import { defineNuxtPlugin } from "#app";
|
||||
|
||||
function labelTable(table) {
|
||||
const names = [...table.querySelectorAll(":scope > thead > tr > th")].map(
|
||||
(th) =>
|
||||
th.querySelector(".p-datatable-column-title")?.textContent.trim() ?? "",
|
||||
);
|
||||
for (const row of table.querySelectorAll(":scope > tbody > tr")) {
|
||||
[...row.children].forEach((cell, index) => {
|
||||
const name = names[index] ?? "";
|
||||
if (cell.dataset.label !== name) cell.dataset.label = name;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export default defineNuxtPlugin({
|
||||
name: "table-cell-labels",
|
||||
setup() {
|
||||
let queued = false;
|
||||
const run = () => {
|
||||
queued = false;
|
||||
document.querySelectorAll("table.p-datatable-table").forEach(labelTable);
|
||||
};
|
||||
const schedule = () => {
|
||||
if (queued) return;
|
||||
queued = true;
|
||||
requestAnimationFrame(run);
|
||||
};
|
||||
new MutationObserver(schedule).observe(document.body, {
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
schedule();
|
||||
},
|
||||
});
|
||||
Reference in new issue
Block a user