fix(Rate、Slider): avoid Vue 2.6 event bubble issues (#5350)

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);
+      }
     }
   }
 });

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
+      <div class={bem()} tabindex="0" role="radiogroup">
-        class={bem()}
-        tabindex="0"
-        role="radiogroup"
-        onTouchstart={this.onTouchStart}
-        onTouchmove={this.onTouchMove}
-      >
         {this.list.map((status, index) => this.genStar(status, index))}
       </div>
     );

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>