cloud-web-corejs 1.1.0-dev.5 → 1.1.0-dev.7

package/src/directive/append-to-body/index.js

@@ -0,0 +1,48 @@
+/**version-1.0*/
+/**
+ * v-append-to-body —— 把元素搬到 document.body 下，脱离宿主子树。
+ *
+ * 用途：那些视觉上是全屏浮层、但写死在业务模板里的 div（如移动版流程的
+ * 通过/驳回/中断/转办/加签确认框）。它们靠 `position:fixed` 定位，一旦祖先出现
+ * transform / filter / display:none 就会失效或被裁掉。搬到 body 下即可根治，
+ * 且不必把它们改造成 el-dialog（造型差太远，改了样式量不减反增）。
+ *
+ * ★ 必须配 v-show 用，不能配 v-if。
+ *   Vue 2 的 patch 在插入节点时要拿兄弟节点当参照物：
+ *     function insert (parent, elm, ref) {
+ *       if (isDef(ref)) { if (nodeOps.parentNode(ref) === parent) { ... } }
+ *     }
+ *   本指令把节点搬走后，它的 parentNode 变成了 body、不再等于宿主元素，于是
+ *   以它为参照物的那次插入会被这个判断**静默跳过**（不报错，但节点没插进去），
+ *   兄弟节点的顺序随之错乱。v-show 不产生插入/移除，节点从头到尾只搬一次，
+ *   没有这个问题 —— element-ui 自己的 append-to-body 弹框也是用 v-show，
+ *   不是 v-if，同一个原因。
+ *
+ * ★ 元素上原有的 `display` 内联值要保留。
+ *   v-show 记的 originalDisplay 取自 `el.style.display`；如果元素本身靠内联
+ *   `style="display: block;"` 顶掉某条 `.xxx{display:none}` 的全局规则，把内联值
+ *   删了会让「显示」态退回 display:none，表现为点了没反应。
+ */
+let modules = {};
+
+modules = {
+  install: function (Vue) {
+    Vue.directive("append-to-body", {
+      inserted(el) {
+        if (el.parentNode !== document.body) {
+          document.body.appendChild(el);
+        }
+      },
+      unbind(el) {
+        // 配 v-show 时切换显隐不会走到这里，只有宿主组件销毁才会。
+        // 那时节点在 body 下、已不在宿主子树里，宿主自身的 DOM 移除够不着它——
+        // 不在这里摘掉就会永久留在 body 上（每进出一次详情页泄漏一份）。
+        if (el.parentNode) {
+          el.parentNode.removeChild(el);
+        }
+      },
+    });
+  },
+};
+
+export default modules;

package/src/index.js

@@ -172,6 +172,10 @@ import elReadonly from "@base/directive/el-readonly/index.js";
 
 Vue.use(elReadonly);
 
+import appendToBody from "@base/directive/append-to-body/index.js";
+
+Vue.use(appendToBody.install);
+
 /*import cnPrint from "@base/components/cnPrint/index.js"
 
 Vue.use(cnPrint);*/