1

src/directives/delayRender.js

+// src/directives/delayRender.js
+/**
+ * 延迟渲染自定义指令（修复版）
+ * @param {Number} binding.value - 延迟时间(ms)，默认2000ms
+ * 核心：延迟期间清空DOM，到期后恢复原始HTML，兼容Vue虚拟DOM
+ */
+export default {
+  mounted(el, binding) {
+    // 1. 校验延迟时间，默认2秒
+    const delay = Number.isFinite(Number(binding.value))
+      ? Number(binding.value)
+      : 2000;
+
+    // 2. 保存原始HTML内容（字符串形式，兼容Vue虚拟DOM，不会丢失）
+    el._originalHTML = el.innerHTML;
+
+    // 3. 清空DOM，实现“不渲染”（可选：添加加载占位符）
+    el.innerHTML = ""; // 纯清空，无占位符
+    // 可选：添加加载占位符（提升体验）
+    // el.innerHTML = '<div style="padding: 20px; color: #999;">正在加载...</div>';
+
+    // 4. 延迟后恢复原始内容，触发渲染
+    el._delayRenderTimer = setTimeout(() => {
+      // 关键：恢复保存的原始HTML
+      if (el._originalHTML) {
+        el.innerHTML = el._originalHTML;
+        // 清理临时变量，减少内存占用
+        delete el._originalHTML;
+      }
+    }, delay);
+  },
+
+  // 组件卸载时强制清理，防止内存泄漏+残留问题
+  unmounted(el) {
+    // 清理定时器
+    if (el._delayRenderTimer) {
+      clearTimeout(el._delayRenderTimer);
+      delete el._delayRenderTimer;
+    }
+    // 清理保存的原始HTML
+    if (el._originalHTML) {
+      delete el._originalHTML;
+    }
+  },
+
+  // 可选：指令更新时重新处理（比如延迟时间动态变化）
+  updated(el, binding) {
+    // 先清理旧定时器
+    if (el._delayRenderTimer) {
+      clearTimeout(el._delayRenderTimer);
+    }
+    // 重新执行挂载逻辑
+    const delay = Number.isFinite(Number(binding.value))
+      ? Number(binding.value)
+      : 2000;
+    el._originalHTML = el.innerHTML;
+    el.innerHTML = "";
+    el._delayRenderTimer = setTimeout(() => {
+      el.innerHTML = el._originalHTML;
+      delete el._originalHTML;
+    }, delay);
+  },
+};

src/directives/index.js

+import delayRender from "./delayRender";
+
+export default {
+  "delay-render": delayRender, // 指令名与指令实现映射
+};

src/main.js

 import { createApp } from "vue";
+// 自定义指令
+import directives from "./directives";
 import "./style.css";
 import App from "./App.vue";
 import ElementPlus from "element-plus";
@@ -20,6 +22,9 @@ app.config.globalProperties.$get = $get;
 app.config.globalProperties.$post = $post;
 app.config.globalProperties.windowConfig = windowConfig;
 app.config.globalProperties.moment = moment;
+Object.entries(directives).forEach(([directiveName, directive]) => {
+  app.directive(directiveName, directive);
+});
 for (const [key, component] of Object.entries(ElIcons)) {
   app.component(key, component);
 }