fix: button navigator view hover-class 兼容鼠标事件

src/core/view/components/button/index.vue

@@ -130,6 +130,8 @@ export default {
             touchstart: this._hoverTouchStart,
             touchend: this._hoverTouchEnd,
             touchcancel: this._hoverTouchCancel,
+            mousedown: this._hoverMousedown,
+            mouseup: this._hoverMouseup,
             click: this._onClick
           }
         },
@@ -429,4 +431,4 @@ export default {
     border-color: rgba(230, 67, 64, 0.6);
     background-color: transparent;
   }
-</style>
+</style>

src/core/view/components/navigator/index.vue

@@ -5,6 +5,8 @@
     @touchstart="_hoverTouchStart"
     @touchend="_hoverTouchEnd"
     @touchcancel="_hoverTouchCancel"
+    @mousedown="_hoverMousedown"
+    @mouseup="_hoverMouseup"
     @click="_onClick"
     v-on="$listeners"
   >

src/core/view/mixins/hover.js

@@ -4,6 +4,7 @@ export default {
       hovering: false
     }
   },
+
   props: {
     hoverClass: {
       type: String,
@@ -22,8 +23,22 @@ export default {
       default: 400
     }
   },
+
   methods: {
     _hoverTouchStart (evt) {
+      if (evt.touches.length > 1) {
+        return
+      }
+      this._handleHoverStart(evt)
+    },
+
+    _hoverMousedown (evt) {
+      evt.preventDefault()
+      this._handleHoverStart(evt)
+      window.addEventListener('mouseup', this._hoverMouseup)
+    },
+
+    _handleHoverStart (evt) {
       // TODO detect scrolling
       if (evt._hoverPropagationStopped) {
         return
@@ -31,9 +46,6 @@ export default {
       if (!this.hoverClass || this.hoverClass === 'none' || this.disabled) {
         return
       }
-      if (evt.touches.length > 1) {
-        return
-      }
       if (this.hoverStopPropagation) {
         evt._hoverPropagationStopped = true
       }
@@ -45,12 +57,23 @@ export default {
         }
       }, this.hoverStartTime)
     },
-    _hoverTouchEnd (evt) {
+
+    _hoverMouseup () {
+      this._handleHoverEnd()
+      window.removeEventListener('mouseup', this._hoverMouseup)
+    },
+
+    _hoverTouchEnd () {
+      this._handleHoverEnd()
+    },
+
+    _handleHoverEnd () {
       this._hoverTouch = false
       if (this.hovering) {
         this._hoverReset()
       }
     },
+
     _hoverReset () {
       requestAnimationFrame(() => {
         clearTimeout(this._hoverStayTimer)
@@ -59,10 +82,11 @@ export default {
         }, this.hoverStayTime)
       })
     },
-    _hoverTouchCancel (evt) {
+
+    _hoverTouchCancel () {
       this._hoverTouch = false
       this.hovering = false
       clearTimeout(this._hoverStartTimer)
     }
   }
-}
+}

src/platforms/h5/view/components/view/index.vue

@@ -5,13 +5,15 @@
     @touchstart="_hoverTouchStart"
     @touchend="_hoverTouchEnd"
     @touchcancel="_hoverTouchCancel"
+    @mousedown="_hoverMousedown"
+    @mouseup="_hoverMouseup"
     v-on="$listeners"
   >
     <slot />
   </uni-view>
   <uni-view
     v-else
-    v-on="$listeners"
+    v-on="$listeners"
   >
     <slot />
   </uni-view>