From cd6050d3e4c1c0c6300610df99d3c8e42a44b23b Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 22 Dec 2019 12:29:14 +0800
Subject: [PATCH] =?UTF-8?q?fix(Rate=E3=80=81Slider):=20avoid=20Vue=202.6?=
 =?UTF-8?q?=20event=20bubble=20issues=20(#5350)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/mixins/touch.ts |  7 +++++--
 src/rate/index.js   | 22 ++++++++++++++--------
 src/slider/index.js |  9 +++++----
 3 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/mixins/touch.ts b/src/mixins/touch.ts
index 55b6999ff..01bddb42c 100644
--- a/src/mixins/touch.ts
+++ b/src/mixins/touch.ts
@@ -61,8 +61,11 @@ export const TouchMixin = Vue.extend({
       const { onTouchStart, onTouchMove, onTouchEnd } = (this as any);
       on(el, 'touchstart', onTouchStart);
       on(el, 'touchmove', onTouchMove);
-      on(el, 'touchend', onTouchEnd);
-      on(el, 'touchcancel', onTouchEnd);
+
+      if (onTouchEnd) {
+        on(el, 'touchend', onTouchEnd);
+        on(el, 'touchcancel', onTouchEnd);
+      }
     }
   }
 });
diff --git a/src/rate/index.js b/src/rate/index.js
index 3cfa29e0b..980db4c3c 100644
--- a/src/rate/index.js
+++ b/src/rate/index.js
@@ -79,6 +79,10 @@ export default createComponent({
     }
   },
 
+  mounted() {
+    this.bindTouchEvent(this.$el);
+  },
+
   methods: {
     select(index) {
       if (!this.disabled && !this.readonly && index !== this.value) {
@@ -137,7 +141,15 @@ export default createComponent({
     },
 
     genStar(status, index) {
-      const { icon, color, count, voidIcon, disabled, voidColor, disabledColor } = this;
+      const {
+        icon,
+        color,
+        count,
+        voidIcon,
+        disabled,
+        voidColor,
+        disabledColor
+      } = this;
       const score = index + 1;
       const isFull = status === 'full';
       const isVoid = status === 'void';
@@ -189,13 +201,7 @@ export default createComponent({
 
   render() {
     return (
-      <div
-        class={bem()}
-        tabindex="0"
-        role="radiogroup"
-        onTouchstart={this.onTouchStart}
-        onTouchmove={this.onTouchMove}
-      >
+      <div class={bem()} tabindex="0" role="radiogroup">
         {this.list.map((status, index) => this.genStar(status, index))}
       </div>
     );
diff --git a/src/slider/index.js b/src/slider/index.js
index f398c9530..5bf453a4f 100644
--- a/src/slider/index.js
+++ b/src/slider/index.js
@@ -51,6 +51,10 @@ export default createComponent({
     this.updateValue(this.value);
   },
 
+  mounted() {
+    this.bindTouchEvent(this.$refs.wrapper);
+  },
+
   methods: {
     onTouchStart(event) {
       if (this.disabled) {
@@ -157,6 +161,7 @@ export default createComponent({
       >
         <div class={bem('bar')} style={barStyle}>
           <div
+            ref="wrapper"
             role="slider"
             tabindex={this.disabled ? -1 : 0}
             aria-valuemin={this.min}
@@ -164,10 +169,6 @@ export default createComponent({
             aria-valuemax={this.max}
             aria-orientation={this.vertical ? 'vertical' : 'horizontal'}
             class={bem('button-wrapper')}
-            onTouchstart={this.onTouchStart}
-            onTouchmove={this.onTouchMove}
-            onTouchend={this.onTouchEnd}
-            onTouchcancel={this.onTouchEnd}
           >
             {this.slots('button') || <div class={bem('button')} />}
           </div>