modify rate

Author: xutao15

README.md

@@ -4,9 +4,9 @@
     </a>
 </p>
 
-# iView Weapp
+# iView mpvue
 
-### 一套高质量的微信小程序 UI 组件库
+### 一套高质量的小程序 UI 组件库
 
 ## 文档
 [https://weapp.iviewui.com](https://weapp.iviewui.com)

dist/components/rate/rate.vue

@@ -6,10 +6,11 @@
       :key="index"
       :data-index="index"
       :class="[index < value ? 'i-rate-current' : '']"
-      class="i-rate-star">
+      class="i-rate-star"
+      @click="handleClick">
       <i-icon type="collection_fill" :size="size"></i-icon>
     </div>
-    <div class="i-rate-text" v-if="value"><slot></slot></div>
+    <div class="i-rate-text" v-if="value && showText">{{value}}{{showText}}</div>
   </div>
 </template>
 <script>
@@ -41,7 +42,11 @@ export default {
     },
     iClass: {
       type: String,
-      default: 'dfsgdfg'
+      default: ''
+    },
+    showText: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -72,8 +77,15 @@ export default {
       })
     },
     handleTouchMove(evt) {
-      if (this.disabled || evt.mp.ch) return
-      
+      if (this.disabled || !evt.mp.changedTouches[0]) return
+      const movePageX = evt.mp.changedTouches[0].pageX
+      const space = movePageX - this.touchesStart.pageX
+      if (space <= 0) {
+        return
+      }
+      let setIndex = Math.ceil(space / this.size)
+      setIndex = setIndex > this.count ? this.count : setIndex
+      this.$emit('change', {index: setIndex})
     }
   }
 }

examples/src/app.json

@@ -36,8 +36,7 @@
     "pages/radio/main",
     "pages/checkbox/main",
     "pages/switch/main",
-    "pages/rate/main",
-    "pages/input-number/main"],
+    "pages/rate/main"],
   "window": {
     "backgroundTextStyle": "light",
     "navigationBarBackgroundColor": "#fff",

examples/src/components/rate/rate.vue

@@ -6,10 +6,11 @@
       :key="index"
       :data-index="index"
       :class="[index < value ? 'i-rate-current' : '']"
-      class="i-rate-star">
+      class="i-rate-star"
+      @click="handleClick">
       <i-icon type="collection_fill" :size="size"></i-icon>
     </div>
-    <div class="i-rate-text" v-if="value"><slot></slot></div>
+    <div class="i-rate-text" v-if="value && showText">{{value}}{{showText}}</div>
   </div>
 </template>
 <script>
@@ -41,7 +42,11 @@ export default {
     },
     iClass: {
       type: String,
-      default: 'dfsgdfg'
+      default: ''
+    },
+    showText: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -72,8 +77,15 @@ export default {
       })
     },
     handleTouchMove(evt) {
-      if (this.disabled || evt.mp.ch) return
-      
+      if (this.disabled || !evt.mp.changedTouches[0]) return
+      const movePageX = evt.mp.changedTouches[0].pageX
+      const space = movePageX - this.touchesStart.pageX
+      if (space <= 0) {
+        return
+      }
+      let setIndex = Math.ceil(space / this.size)
+      setIndex = setIndex > this.count ? this.count : setIndex
+      this.$emit('change', {index: setIndex})
     }
   }
 }

examples/src/pages/rate/index.vue

@@ -24,22 +24,22 @@
       <i-cell title="自定义文字说明">
         <i-rate 
           @change="onChange2" 
-          :value="starIndex2">
-          {{starIndex2}}星
+          :value="starIndex2"
+          show-text="星">
         </i-rate>
       </i-cell>
       <i-cell title="手势touch选择星">
         <i-rate 
           @change="onChange3" 
-          :value="starIndex3">
-          {{starIndex3}}星
+          :value="starIndex3"
+          show-text="星">
         </i-rate>
       </i-cell>
       <i-cell title="禁用点击和手势选择星">
         <i-rate 
           :disabled="true"
-          :value="starIndex4">
-          {{starIndex4}}星
+          :value="starIndex4"
+          show-text="星">
         </i-rate>
       </i-cell>
     </i-cell-group>
@@ -66,16 +66,16 @@ export default {
   },
   methods: {
     onChange1(e) {
-
+      this.starIndex1 = e.index
     },
     onChange2(e) {
-
+      this.starIndex2 = e.index
     },
     onChange3(e) {
-
+      this.starIndex3 = e.index
     },
     onChange5(e) {
-      
+      this.starIndex5 = e.index
     }
   }
 }

src/components/rate/rate.vue

@@ -6,10 +6,11 @@
       :key="index"
       :data-index="index"
       :class="[index < value ? 'i-rate-current' : '']"
-      class="i-rate-star">
+      class="i-rate-star"
+      @click="handleClick">
       <i-icon type="collection_fill" :size="size"></i-icon>
     </div>
-    <div class="i-rate-text" v-if="value"><slot></slot></div>
+    <div class="i-rate-text" v-if="value && showText">{{value}}{{showText}}</div>
   </div>
 </template>
 <script>
@@ -41,7 +42,11 @@ export default {
     },
     iClass: {
       type: String,
-      default: 'dfsgdfg'
+      default: ''
+    },
+    showText: {
+      type: String,
+      default: ''
     }
   },
   data() {
@@ -72,8 +77,15 @@ export default {
       })
     },
     handleTouchMove(evt) {
-      if (this.disabled || evt.mp.ch) return
-      
+      if (this.disabled || !evt.mp.changedTouches[0]) return
+      const movePageX = evt.mp.changedTouches[0].pageX
+      const space = movePageX - this.touchesStart.pageX
+      if (space <= 0) {
+        return
+      }
+      let setIndex = Math.ceil(space / this.size)
+      setIndex = setIndex > this.count ? this.count : setIndex
+      this.$emit('change', {index: setIndex})
     }
   }
 }