@mdsfe/mds-ui 0.4.10 → 0.4.11-0

package/dist/modal.js

@@ -1017,6 +1017,16 @@ var PREFIXCLS = 'mds-modal';
       this.initZindex();
     }
     document.body.appendChild(this.$refs.root);
+  },
+  beforeDestroy: function beforeDestroy() {
+    // 清理附加到 body 的 DOM 节点，避免 DOM 泄漏
+    if (this.$refs.root && this.$refs.root.parentNode) {
+      this.$refs.root.parentNode.removeChild(this.$refs.root);
+    }
+    // 恢复 body 滚动状态
+    if (this.disabledScroll) {
+      Object(util["d" /* fixBodyScroll */])(false);
+    }
   }
 });
 // CONCATENATED MODULE: ./components/modal/modal.vue?vue&type=script&lang=js&

package/dist/tabs.js

@@ -693,11 +693,14 @@ var external_lodash_debounce_default = /*#__PURE__*/__webpack_require__.n(extern
   mounted: function mounted() {
     var _this = this;
 
-    var debouncedResize = external_lodash_debounce_default()(function () {
+    this.debouncedResize = external_lodash_debounce_default()(function () {
       _this.setNextPrev();
       _this.scrollToActive();
     }, 200);
-    this.resizeEvent = window.addEventListener('resize', debouncedResize);
+    window.addEventListener('resize', this.debouncedResize);
+  },
+  beforeDestroy: function beforeDestroy() {
+    window.removeEventListener('resize', this.debouncedResize);
   },
   beforeUpdate: function beforeUpdate() {
     this.setNextPrev();

package/dist/tree.js

@@ -1628,84 +1628,73 @@ var external_transition_default = /*#__PURE__*/__webpack_require__.n(external_tr
     leaveBlock: function leaveBlock() {
       this.blockHover = false;
     },
+    handleDragMouseMove: function handleDragMouseMove(event) {
+      if (!this.draggingVNode) return;
+      var rect = this.$el.getBoundingClientRect();
+      var left = event.clientX - this.dragMousePos.x;
+      var top = event.clientY - this.dragMousePos.y;
+
+      if (!this.node.tree.dragStatus && (Math.abs(left - rect.left) > 10 || Math.abs(top - rect.top) > 10)) {
+        document.body.appendChild(this.draggingVNode);
+        this.node.tree.currentCathcNode = this.node;
+        this.node.tree.dragStatus = true;
+      }
+
+      this.draggingVNode.style.left = left + 'px';
+      this.draggingVNode.style.top = top + 'px';
+    },
+    handleDragMouseUp: function handleDragMouseUp() {
+      var node = this.node;
+      var target = node.tree.currentTargetNode;
+
+      document.removeEventListener('mousemove', this.handleDragMouseMove);
+      document.removeEventListener('mouseup', this.handleDragMouseUp);
+
+      if (node.tree.dragStatus && this.draggingVNode && this.draggingVNode.parentNode) {
+        this.draggingVNode.parentNode.removeChild(this.draggingVNode);
+      }
+
+      this.draggingVNode = null;
+      node.tree.dragStatus = false;
+
+      if (target && target !== node) {
+        if (node.tree.targetAction === 'first') {
+          target.first(node);
+        } else if (node.tree.targetAction === 'after') {
+          target.after(node);
+        } else if (node.tree.targetAction === 'append') {
+          target.append(node);
+        }
+      }
+      node.tree.currentCathcNode = null;
+      node.tree.currentTargetNode = null;
+    },
     listenDrag: function listenDrag() {
       var _this = this;
 
       var el = this.$el;
-      el.onmousedown = function (event) {
-        var node = _this.node;
-        var vnode = void 0;
+      this.dragHandler = function (event) {
         var rect = el.getBoundingClientRect();
         event.stopPropagation();
-        vnode = el.cloneNode(true);
+
+        var vnode = el.cloneNode(true);
         vnode.style.position = 'fixed';
         vnode.style.opacity = '0.6';
-        vnode.style.left = rect.left;
-        vnode.style.top = rect.top;
-        // (clientX, clientY)点击位置距离当前可视区域的坐标(x，y)
-        // offsetLeft, offsetTop 距离上层或父级的左边距和上边距
-
-        // 获取鼠标在弹窗中的位置
-        var mouseX = event.clientX - rect.left;
-        var mouseY = event.clientY - rect.top;
-        // 绑定移动和停止函数
-        document.onmousemove = function (event) {
-          var left = void 0,
-              top = void 0;
-          // 获取新的鼠标位置(event.clientX, event.clientY)
-          // 弹窗应该在的位置(left, top)
-          left = event.clientX - mouseX;
-          top = event.clientY - mouseY;
-          if (Math.abs(left - rect.left) > 10 || Math.abs(top - rect.top) > 10) {
-            document.body.appendChild(vnode);
-            node.tree.currentCathcNode = node;
-            node.tree.dragStatus = true;
-          }
-          // offsetWidth、offsetHeight 当前元素的宽度
-          // innerWidth、innerHeight 浏览器可视区的宽度和高度
-
-          // 获取弹窗在页面中距X轴的最小、最大 位置
-          // let minX = -vnode.offsetWidth / 2 + 150
-          // let maxX = window.innerWidth + vnode.offsetWidth / 2 - 150
-          // if (left <= minX) {
-          //   left = minX
-          // } else if (left >= maxX) {
-          //   left = maxX
-          // }
-
-          // 获取弹窗在页面中距Y轴的最小、最大 位置
-          // let minY = 20
-          // let maxY = window.innerHeight + vnode.offsetHeight / 2 - 50
-          // if (top <= minY) {
-          //   top = minY
-          // } else if (top >= maxY) {
-          //   top = maxY
-          // }
-          // 赋值移动
-          vnode.style.left = left + 'px';
-          vnode.style.top = top + 'px';
-        };
-        document.onmouseup = function () {
-          var target = node.tree.currentTargetNode;
-          document.onmousemove = document.onmouseup = null;
-          if (node.tree.dragStatus) {
-            document.body.removeChild(vnode);
-          }
-          node.tree.dragStatus = false;
-          if (target && target !== node) {
-            console.log(node.tree.targetAction);
-            if (node.tree.targetAction === 'first') {
-              target.first(node);
-            } else if (node.tree.targetAction === 'after') {
-              target.after(node);
-            } else if (node.tree.targetAction === 'append') {
-              target.append(node);
-            }
-          }
-          node.tree.currentCathcNode = null;
-          node.tree.currentTargetNode = null;
+        vnode.style.left = rect.left + 'px';
+        vnode.style.top = rect.top + 'px';
+        vnode.style.zIndex = '9999';
+        vnode.style.pointerEvents = 'none';
+
+        _this.draggingVNode = vnode;
+        _this.dragMousePos = {
+          x: event.clientX - rect.left,
+          y: event.clientY - rect.top
         };
+
+        document.addEventListener('mousemove', _this.handleDragMouseMove);
+        document.addEventListener('mouseup', _this.handleDragMouseUp);
       };
+      el.addEventListener('mousedown', this.dragHandler);
     }
   },
   mounted: function mounted() {
@@ -1713,6 +1702,17 @@ var external_transition_default = /*#__PURE__*/__webpack_require__.n(external_tr
       this.listenDrag();
     }
   },
+  beforeDestroy: function beforeDestroy() {
+    var el = this.$el;
+    if (this.dragHandler) {
+      el.removeEventListener('mousedown', this.dragHandler);
+    }
+    document.removeEventListener('mousemove', this.handleDragMouseMove);
+    document.removeEventListener('mouseup', this.handleDragMouseUp);
+    if (this.draggingVNode && this.draggingVNode.parentNode) {
+      this.draggingVNode.parentNode.removeChild(this.draggingVNode);
+    }
+  },
 
   watch: {
     'node.check': function nodeCheck() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mdsfe/mds-ui",
-  "version": "0.4.10",
+  "version": "0.4.11-0",
   "description": "A set of enterprise-class Vue UI components-beta.",
   "main": "dist/mds-ui.common.js",
   "unpkg": "dist/mds-ui.min.js",