docs(Rate): add change event demo (#5596)

src/rate/README.md

@@ -88,6 +88,22 @@ export default {
 <van-rate v-model="value" readonly />
 ```
 
+### Change Event
+
+```html
+<van-rate v-model="value" @change="onChange" />
+```
+
+```javascript
+export default {
+  method: {
+    onChange(value) {
+       Toast('current value:'+ value);
+    }
+  }
+}
+```
+
 ## API
 
 ### Props

src/rate/README.zh-CN.md

@@ -88,6 +88,22 @@ export default {
 <van-rate v-model="value" readonly />
 ```
 
+### 监听 change 事件
+
+```html
+<van-rate v-model="value" @change="onChange" />
+```
+
+```javascript
+export default {
+  method: {
+    onChange(value) {
+      Toast('当前值：'+ value);
+    }
+  }
+}
+```
+
 ## API
 
 ### Props

src/rate/demo/index.vue

@@ -39,6 +39,13 @@
     <demo-block :title="$t('readonly')">
       <van-rate v-model="value6" readonly />
     </demo-block>
+
+    <demo-block :title="$t('changeEvent')">
+      <van-rate
+        v-model="value7"
+        @change="onChange"
+      />
+    </demo-block>
   </demo-section>
 </template>
 
@@ -52,6 +59,8 @@ export default {
       customStyle: '自定义样式',
       customCount: '自定义数量',
       readonly: '只读状态',
+      changeEvent: '监听 change 事件',
+      toastContent: (value) => `当前值：${value}`
     },
     'en-US': {
       halfStar: 'Half Star',
@@ -60,7 +69,9 @@ export default {
       customStyle: 'Custom Style',
       customCount: 'Custom Count',
       readonly: 'Readonly',
-    },
+      changeEvent: 'Change Event',
+      toastContent: (value) => `current value：${value}`
+    }
   },
 
   data() {
@@ -71,8 +82,16 @@ export default {
       value4: 2.5,
       value5: 4,
       value6: 3,
+      value7: 2
     };
   },
+
+  methods: {
+    onChange(value) {
+      this.value7 = value;
+      this.$toast(this.$t('toastContent', value));
+    }
+  }
 };
 </script>
 

src/rate/test/__snapshots__/demo.spec.js.snap

@@ -107,5 +107,19 @@ exports[`renders demo correctly 1`] = `
           <!----></i></div>
     </div>
   </div>
+  <div>
+    <div tabindex="0" role="radiogroup" class="van-rate">
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="1" aria-checked="true" class="van-rate__item"><i data-score="1" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="2" aria-checked="true" class="van-rate__item"><i data-score="2" class="van-icon van-icon-star van-rate__icon" style="color: rgb(255, 210, 30);">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="3" aria-checked="false" class="van-rate__item"><i data-score="3" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="4" aria-checked="false" class="van-rate__item"><i data-score="4" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+          <!----></i></div>
+      <div role="radio" tabindex="0" aria-setsize="5" aria-posinset="5" aria-checked="false" class="van-rate__item"><i data-score="5" class="van-icon van-icon-star-o van-rate__icon" style="color: rgb(199, 199, 199);">
+          <!----></i></div>
+    </div>
+  </div>
 </div>
 `;