update

2023-10-08 14:30:50 +08:00
parent 57960ff8bf
commit ab8e9cb2a5
4 changed files with 163 additions and 20 deletions
--- a/src/views/print/drag.js
+++ b/src/views/print/drag.js
@@ -0,0 +1,96 @@
+import './drag.css';
+
+export default {
+    bind(el, { name, value }, vnode) {
+        switch (name) {
+            case 'drag': {
+                if (['left', 'right', 'top', 'bottom'].indexOf(value) == -1) return;
+                // 创建边框子元素
+                const border = document.createElement('div');
+                border.classList.add("pseudo-border");
+                el.appendChild(border);
+                // 添加拖拽样式
+                addDragStyle(el, value);
+                // 添加拖拽事件
+                addDragEvent(el, border);
+                break;
+            }
+        }
+    },
+    // inserted()
+    // update()
+    // componentUpdated()
+    // unbind()
+}
+
+function addDragEvent(el, border, direction) {
+    // border.setAttribute('draggable', true)
+    const onMouseMove = function (e) {
+        console.log('move', e);
+    }
+    const onMouseUp = function (e) {
+        console.log('up')
+        border.removeEventListener('mousemove', onMouseMove);
+    }
+    
+    border.addEventListener('mousedown', function (e) {
+        console.log('down');
+        document.body.removeEventListener('mouseup', onMouseUp)
+        document.body.addEventListener('mouseup', onMouseUp)
+        border.addEventListener('mousemove', onMouseMove);
+    });
+
+    // TODO: 有点bug
+
+    // el.addEventListener('mousedown', function (e) {
+    //     console.log('mousedown', e);
+    //     const { clientX, clientY } = e;
+    //     const { left, top, width, height } = el.getBoundingClientRect();
+    //     const { offsetLeft, offsetTop } = el;
+    //     const startX = clientX;
+    //     const startY = clientY;
+    //     const startLeft = left;
+    //     const startTop = top;
+    //     const startWidth = width;
+    //     const startHeight = height;
+    //     const startOffsetLeft = offsetLeft;
+    //     const startOffsetTop = offsetTop;
+    //     const move = function (e) {
+    //         console.log('mousemove', e);
+    //         const { clientX, clientY } = e;
+    //         const offsetX = clientX - startX;
+    //         const offsetY = clientY - startY;
+    //         switch (direction) {
+    //             case 'left': {
+    //                 el.style.left = startLeft + offsetX + 'px';
+    //                 el.style.width = startWidth - offsetX + 'px';
+    //                 break;
+    //             }
+    //             case 'right': {
+    //                 el.style.width = startWidth + offsetX + 'px';
+    //                 break;
+    //             }
+    //             case 'top': {
+    //                 el.style.top = startTop + offsetY + 'px';
+    //                 el.style.height = startHeight - offsetY + 'px';
+    //                 break;
+    //             }
+    //             case 'bottom': {
+    //                 el.style.height = startHeight + offsetY + 'px';
+    //                 break;
+    //             }
+    //         }
+    //     }
+    //     const up = function (e) {
+    //         console.log('mouseup', e);
+    //         document.removeEventListener('mousemove', move);
+    //         document.removeEventListener('mouseup', up);
+    //     }
+    //     document.addEventListener('mousemove', move);
+    //     document.addEventListener('mouseup', up);
+    // });
+}
+
+function addDragStyle(el, direction) {
+    el.classList.add('v-drag-border-' + direction)
+}