blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Lindy 2020-01-19 17:43:09 +08:00 committed by neverland
parent a30bf27559
commit 8345d6e126
4 changed files with 66 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/rate/README.md
View File

@ -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

16
src/rate/README.zh-CN.md
View File

@ -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

21
src/rate/demo/index.vue
View File

@ -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>

14
src/rate/test/__snapshots__/demo.spec.js.snap
View File

@ -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>
`;