From 8345d6e1261980395b2467ff94e4de5f65c2db77 Mon Sep 17 00:00:00 2001
From: Lindy <33708359+Lindysen@users.noreply.github.com>
Date: Sun, 19 Jan 2020 17:43:09 +0800
Subject: [PATCH] docs(Rate): add change event demo (#5596)

---
 src/rate/README.md                            | 16 ++++++++++++++
 src/rate/README.zh-CN.md                      | 16 ++++++++++++++
 src/rate/demo/index.vue                       | 21 ++++++++++++++++++-
 src/rate/test/__snapshots__/demo.spec.js.snap | 14 +++++++++++++
 4 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/src/rate/README.md b/src/rate/README.md
index a7e5c71c4..6d500d10b 100644
--- a/src/rate/README.md
+++ b/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
diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md
index 4df99b5c0..d2c590594 100644
--- a/src/rate/README.zh-CN.md
+++ b/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
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue
index bacfc25a8..d97952cd2 100644
--- a/src/rate/demo/index.vue
+++ b/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>
 
diff --git a/src/rate/test/__snapshots__/demo.spec.js.snap b/src/rate/test/__snapshots__/demo.spec.js.snap
index 3a709cb5f..60152e74c 100644
--- a/src/rate/test/__snapshots__/demo.spec.js.snap
+++ b/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>
 `;