优化组件外点击事件

src/form/input.wc

@@ -45,6 +45,7 @@ li {
   textarea {
     flex: 1;
     min-width: 0;
+    width: 0;
     height: 100%;
     padding: 0 5px;
     border: 0;
@@ -61,8 +62,7 @@ li {
     }
   }
   textarea {
-    width: 100%;
-    padding: 5px;
+    padding: 5px 8px;
     resize: none;
   }
   .prepend,
@@ -107,7 +107,7 @@ li {
   padding: 8px 0;
   border-radius: 4px;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
   .list {
     width: 100%;
@@ -221,7 +221,7 @@ li {
 <script>
 import '../scroll/index'
 import '../icon/index'
-import { nextTick, ebind, bind, unbind } from '../utils'
+import { ebind, bind, unbind, clickOutside } from '../utils'
 
 const IS_FIREFOX = !!window.sidebar
 const TYPES = ['text', 'textarea', 'password']
@@ -458,9 +458,7 @@ export default class Input {
         }
       })
 
-      this._bubbleFn = ebind(this, 'click')
-
-      this._inactiveFn = bind(document, 'click', ev => {
+      this._inactiveFn = clickOutside(this, ev => {
         this.__LIST__.classList.remove('show')
       })
 
@@ -478,8 +476,7 @@ export default class Input {
     unbind(this.__INPUT__, 'wheel', this._handleWheel)
     unbind(this.__INPUT__, 'keydown', this._handleSubmit)
     unbind(this.__INPUT__, 'input', this._handleChange)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__LIST__, 'click', this._handleSelect)
   }
 

src/form/select.wc

@@ -39,6 +39,7 @@
     flex: 1;
     width: 0;
     min-width: 64px;
+    width: 0;
     height: 100%;
     padding: 0 5px;
     border: 0;
@@ -99,7 +100,7 @@
   padding: 8px 0;
   border-radius: 4px;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
   cursor: default;
 
   .list {
@@ -209,8 +210,8 @@
     height: 24px;
     font-size: 12px;
   }
-  .icon {
-    --size: 16px;
+  .arrow {
+    --size: 12px;
   }
   .prepend,
   .append {
@@ -222,7 +223,7 @@
 <script>
 import '../scroll/index'
 import '../icon/index'
-import { nextTick, ebind, bind, unbind } from '../utils'
+import { ebind, bind, unbind, clickOutside } from '../utils'
 
 function parseOptions(arr, props) {
   let html = ''
@@ -407,9 +408,14 @@ export default class Select {
 
     function initPos() {
       var { x, y, width } = this.getBoundingClientRect()
+      var size = this.getAttribute('size')
       this.props.active = true
-      this.__OPTG__.style.cssText = `left:${x}px;top:${y +
-        50}px;width:${width}px;`
+      if (size && size === 'mini') {
+        y += 32
+      } else {
+        y += 50
+      }
+      this.__OPTG__.style.cssText = `left:${x}px;top:${y}px;width:${width}px;`
     }
 
     /* ---------------------------------------------------- */
@@ -454,8 +460,7 @@ export default class Select {
       }
     })
 
-    this._bubbleFn = ebind(this, 'click')
-    this._inactiveFn = bind(document, 'click', ev => {
+    this._inactiveFn = clickOutside(this, ev => {
       this.__OPTG__.classList.toggle('show', false)
       this.props.active = false
     })
@@ -497,8 +502,7 @@ export default class Select {
   unmount() {
     unbind(this.__INPUT__, 'keydown', this._handleKeydown)
     unbind(this.__INPUT__, 'click', this._activeFn)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__OPTG__, 'click', this._handleSelect)
   }
 }

src/picker/date.wc

@@ -99,7 +99,7 @@
   font-size: 12px;
   text-align: center;
   background: #fff;
-  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
 
   &::after {
     position: absolute;
@@ -225,7 +225,7 @@
 
 <script>
 import '../icon/index'
-import { nextTick, each, ebind, bind, unbind } from '../utils'
+import { nextTick, each, ebind, bind, unbind, clickOutside } from '../utils'
 
 const today = new Date()
 
@@ -505,8 +505,7 @@ export default class DatePicker {
       this.__CALENDAR__.classList.toggle('show')
     })
 
-    this._bubbleFn = ebind(this, 'click')
-    this._inactiveFn = bind(document, 'click', ev => {
+    this._inactiveFn = clickOutside(this, ev => {
       this.__CALENDAR__.classList.toggle('show', false)
       this.props.active = false
     })
@@ -583,8 +582,7 @@ export default class DatePicker {
 
   unmount() {
     unbind(this.__INPUT__, 'click', this._activeFn)
-    unbind(this, 'click', this._bubbleFn)
-    unbind(document, 'click', this._inactiveFn)
+    unbind(document, 'mousedown', this._inactiveFn)
     unbind(this.__CTRL__, 'click', this._ctrlFn)
     unbind(this.__DAYS__, 'click', this._pickFn)
   }

src/utils.js

@@ -85,3 +85,17 @@ export const unbind = function(dom, type, fn = noop, phase = false) {
     dom.removeEventListener(t, fn, phase)
   })
 }
+
+// 指定节点外点击(最高不能超过body层)
+export const clickOutside = function(dom, fn = noop) {
+  return bind(document, 'mousedown', ev => {
+    if (ev) {
+      var target = ev.target
+
+      if (dom === target || dom.contains(target)) {
+        return
+      }
+      fn(ev)
+    }
+  })
+}