From 1027838c91903997478e19fb40cbd27a891e8d11 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Thu, 9 Jul 2020 17:42:55 +0800
Subject: [PATCH] perf: 分离hover-class逻辑

---
 packages/button/index.vue | 62 +++++++++-----------------------------------------------------
 packages/mixins/button.js | 66 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+), 53 deletions(-)
 create mode 100644 packages/mixins/button.js

diff --git a/packages/button/index.vue b/packages/button/index.vue
index 5f14d84..e7b6f29 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -6,9 +6,11 @@
 
 <script>
 import color from 'color';
+import BUTTON_MIXIN from '../mixins/button';
 
 export default {
   name: 'Button',
+  mixins: [BUTTON_MIXIN],
   props: {
     type: {
       type: String,
@@ -27,31 +29,14 @@ export default {
     disabled: Boolean,
     theme: String,
     color: String,
-    hoverClass: {
-      type: String,
-      default: 'button-hover',
-    },
-    hoverStartTime: {
-      type: Number,
-      default: 0,
-    },
-    hoverStayTime: {
-      type: Number,
-      default: 70,
-    },
-  },
-  data() {
-    return {
-      active: false,
-    };
   },
   computed: {
     classRender() {
       return {
+        ...this.bindClass,
         [this.size]: true,
         [this.type]: true,
         [this.theme]: !!this.theme,
-        [this.hoverClass]: this.active,
         disabled: this.disabled,
         block: this.block,
         round: this.round,
@@ -63,63 +48,34 @@ export default {
       if (this.color) {
         if (this.type === 'primary') {
           return {
-            backgroundColor: this.active ? color(this.color).lighten(0.2) : this.color,
-            borderColor: this.active ? color(this.color).lighten(0.2) : this.color,
+            backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color,
+            borderColor: this.hover ? color(this.color).lighten(0.2) : this.color,
           };
         } else if (this.type === 'secondary') {
           return {
-            backgroundColor: this.active ? color(this.color).lightness(90) : color(this.color).lightness(95),
+            backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
             color: this.color,
           };
         } else if (this.type === 'plain') {
           return {
             borderColor: this.color,
             color: this.color,
-            backgroundColor: this.active ? color(this.color).lightness(90) : color(this.color).lightness(95),
+            backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
           };
         } else if (this.type === 'ghost') {
           return {
             borderColor: this.color,
             color: this.color,
-            backgroundColor: this.active ? color(this.color).lightness(95) : undefined,
+            backgroundColor: this.hover ? color(this.color).lightness(95) : undefined,
           };
         } else {
           return {
-            color: this.active ? color(this.color).lighten(0.2) : this.color,
+            color: this.hover ? color(this.color).lighten(0.2) : this.color,
           };
         }
       }
       return {};
     },
-    bindEvents() {
-      const events = this.$listeners || {};
-      const activeEvents = ['mousedown', 'touchstart'];
-      const deactiveEvents = ['mouseup', 'mousemove', 'touchend', 'touchmove'];
-      let safeEvents = { ...events };
-      activeEvents.forEach(key => {
-        safeEvents[key] = e => {
-          const originEvent = events[key];
-          originEvent && originEvent(e);
-          if (this.hoverStartTime) {
-            setTimeout(() => {
-              this.active = true;
-            }, this.hoverStartTime);
-          } else {
-            this.active = true;
-          }
-        };
-      });
-      deactiveEvents.forEach(key => {
-        safeEvents[key] = e => {
-          const originEvent = events[key];
-          originEvent && originEvent(e);
-          setTimeout(() => {
-            this.active = false;
-          }, this.hoverStayTime);
-        };
-      });
-      return safeEvents;
-    },
   },
 };
 </script>
diff --git a/packages/mixins/button.js b/packages/mixins/button.js
new file mode 100644
index 0000000..f5ac696
--- /dev/null
+++ b/packages/mixins/button.js
@@ -0,0 +1,66 @@
+/**
+ * @file 仿微信小程序按钮hover-class
+ */
+
+export default {
+  props: {
+    // 指定按钮按下去的样式类。当 hover-class="none" 时，没有点击态效果
+    hoverClass: {
+      type: String,
+      default: 'button-hover',
+    },
+    // 按住后多久出现点击态，单位毫秒
+    hoverStartTime: {
+      type: Number,
+      default: 0,
+    },
+    // 手指松开后点击态保留时间，单位毫秒
+    hoverStayTime: {
+      type: Number,
+      default: 70,
+    },
+  },
+  data() {
+    return {
+      hover: false,
+    };
+  },
+  computed: {
+    // 计算绑定的class对象
+    bindClass() {
+      return {
+        [this.hoverClass]: this.hover,
+      };
+    },
+    // 事件hack
+    bindEvents() {
+      const events = this.$listeners || {};
+      const activeEvents = ['mousedown', 'touchstart'];
+      const deactiveEvents = ['mouseup', 'mouseout', 'touchend'];
+      let safeEvents = { ...events };
+      activeEvents.forEach(key => {
+        safeEvents[key] = e => {
+          const originEvent = events[key];
+          originEvent && originEvent(e);
+          if (this.hoverStartTime) {
+            setTimeout(() => {
+              this.hover = true;
+            }, this.hoverStartTime);
+          } else {
+            this.hover = true;
+          }
+        };
+      });
+      deactiveEvents.forEach(key => {
+        safeEvents[key] = e => {
+          const originEvent = events[key];
+          originEvent && originEvent(e);
+          setTimeout(() => {
+            this.hover = false;
+          }, this.hoverStayTime);
+        };
+      });
+      return safeEvents;
+    },
+  },
+};
--
libgit2 0.21.0