移除date组件的定位;完成拖拽组件的重构

src/drag/core.js

@@ -19,6 +19,15 @@ const DEF_OPT = {
 export default class Drag {
   constructor(elem) {
     this.$elem = elem
+
+    this._init()
+  }
+
+  _init() {
+    this.$elem.style.transform = ''
+    var { x, y } = this.$elem.getBoundingClientRect()
+    // _x, _y是位移,用于数据修正
+    this.pos = { x, y, _x: 0, _y: 0 }
   }
 
   // drag by
@@ -38,13 +47,122 @@ export default class Drag {
     } else {
       ico = '-webkit-' + ico
     }
-    this.$drag.style.cursor = ico
+    node.style.cursor = ico
 
-    bind(this.$drag, 'mousedown', ev => {
+    this._handleResize = bind(window, 'resize', this._init.bind(this))
+
+    // let
+    this._handleMousedown = bind(node, 'mousedown', ev => {
+      if (this.disabled) {
+        return
+      }
       var bcr = this.$elem.getBoundingClientRect()
-      log(bcr)
+
+      /* 修正由于页面有滚动距离,导致拖拽位移计算不正确的情况 */
+      if (bcr.x - this.pos._x !== this.pos.x) {
+        this.pos.x = bcr.x - this.pos._x
+      }
+      if (bcr.y - this.pos._y !== this.pos.y) {
+        this.pos.y = bcr.y - this.pos._y
+      }
+
+      let mx = ev.pageX
+      let my = ev.pageY
+
+      let ww = document.documentElement.clientWidth
+      let wh = document.documentElement.clientHeight
+
+      let tw = bcr.width
+      let th = bcr.height
+
+      //限制区域, 4个值依次是: 上, 右, 下, 左
+      let limit = [0, ww - tw, wh - th, 0]
+      if (this.opt.limit === 'parent') {
+        let pbcr = this.$elem.parentNode.getBoundingClientRect()
+        limit = [pbcr.top, pbcr.right - tw, pbcr.bottom - th, pbcr.left]
+      }
+
+      let handleMove = bind(document, 'mousemove', ev => {
+        // 防止拖动到边缘时导致页面滚动
+        ev.preventDefault()
+
+        let _x = ev.pageX - mx + (bcr.x - this.pos.x)
+        let _y = ev.pageY - my + (bcr.y - this.pos.y)
+
+        // 将另外一个方向的值清零来实现单向拖拽
+        if (this.opt.axis === 'x') {
+          _y = 0
+        }
+        if (this.opt.axis === 'y') {
+          _x = 0
+        }
+
+        // 限制不可拖拽出指定区域(可视区或者父容器)
+        if (this.opt.overflow === false) {
+          if (_x < limit[3] - this.pos.x) {
+            _x = limit[3] - this.pos.x
+          } else if (_x > limit[1] - this.pos.x) {
+            _x = limit[1] - this.pos.x
+          }
+
+          if (_y < limit[0] - this.pos.y) {
+            _y = limit[0] - this.pos.y
+          } else if (_y > limit[2] - this.pos.y) {
+            _y = limit[2] - this.pos.y
+          }
+        }
+        this.pos._x = _x
+        this.pos._y = _y
+        this.$elem.dispatchEvent(
+          new CustomEvent('dragging', {
+            detail: {
+              offset: {
+                x: this.pos.x + _x,
+                y: this.pos.y + _y
+              },
+              move: { x: _x, y: _y }
+            }
+          })
+        )
+        this.$elem.style.transform = `translate(${_x}px, ${_y}px)`
+      })
+
+      let handleUp = bind(document, 'mouseup', ev => {
+        this.$elem.dispatchEvent(
+          new CustomEvent('dragged', {
+            detail: {
+              offset: {
+                x: this.pos.x + this.pos._x,
+                y: this.pos.y + this.pos._y
+              },
+              move: { x: this.pos._x, y: this.pos._y }
+            }
+          })
+        )
+        unbind(document, 'mousemove', handleMove)
+        unbind(document, 'mouseup', handleUp)
+      })
     })
 
     return this
   }
+
+  on(name, cb) {
+    if (!name || typeof cb !== 'function') {
+      return
+    }
+    return bind(this, name, cb)
+  }
+
+  off(name, cb) {
+    unbind(this, name, cb)
+  }
+
+  destroy() {
+    unbind(window, 'resize', this._handleResize)
+    unbind(this.$drag, 'mousedown', this._handleMousedown)
+
+    delete this.$elem
+    delete this.$drag
+  }
 }

src/layer/next.wc

@@ -28,7 +28,7 @@
   flex: 0 auto;
   position: absolute;
   z-index: 65535;
-  padding: 15px 10px;
+  // padding: 15px 10px;
   border-radius: 3px;
   color: #666;
   font-size: 14px;
@@ -51,9 +51,9 @@
 
   &__title {
     width: 100%;
-    height: 43px;
+    height: 60px;
-    padding: 0 10px;
+    padding: 15px;
-    line-height: 43px;
+    line-height: 30px;
     font-size: 16px;
     color: nth($cd, 2);
   }
@@ -69,8 +69,8 @@
 
   &__ctrl {
     width: 100%;
-    height: 40px;
+    height: 60px;
-    padding: 5px 0;
+    padding: 15px;
     line-height: 30px;
     font-size: 14px;
     color: #454545;
@@ -105,7 +105,7 @@
     background: #fff;
 
     &__content {
-      padding: 10px;
+      padding: 0 15px;
     }
   }
 }
@@ -953,5 +953,9 @@ export default class Layer {
   set title(val) {
     this.__TITLE__.textContent = val || lang.TITLE
   }
+
+  mounted() {}
+
+  unmount() {}
 }
 </script>

src/picker/date.wc

@@ -30,7 +30,6 @@
 :host {
   overflow: hidden;
   display: inline-block;
-  position: relative;
   min-width: 105px;
   user-select: none;
   -moz-user-select: none;