mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-05-22 14:39:16 +08:00
[Improvement] Rate: add english document (#1010)
This commit is contained in:
neverland
GitHub
parent
4d546ff11a
commit
a092806f04
@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-rate v-model="valueA" />
|
||||
<van-rate v-model="value1" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-rate
|
||||
v-model="valueB"
|
||||
v-model="value2"
|
||||
:size="25"
|
||||
:todal="6"
|
||||
:color="'#2ba'"
|
||||
:default-color="'#ceefe8'"
|
||||
:count="6"
|
||||
color="#2ba"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate disabled v-model="valueC" />
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate disabled v-model="value3" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
@ -35,9 +35,9 @@ export default {
|
||||
|
||||
data() {
|
||||
return {
|
||||
valueA: 3,
|
||||
valueB: 4,
|
||||
valueC: 2
|
||||
value1: 3,
|
||||
value2: 4,
|
||||
value3: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
56
docs/markdown/en-US/rate.md
Normal file
56
docs/markdown/en-US/rate.md
Normal file
@ -0,0 +1,56 @@
|
||||
## Rate
|
||||
|
||||
### Install
|
||||
``` javascript
|
||||
import { Rate } from 'vant';
|
||||
|
||||
Vue.use(Rate);
|
||||
```
|
||||
|
||||
### Usage
|
||||
|
||||
#### Basic Usage
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### Custom Color
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:count="6"
|
||||
color="#2ba"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
```
|
||||
|
||||
#### Disabled
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
### Rate API
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | Current rate | `Number` | - |
|
||||
| count | Count | `Number` | `5` |
|
||||
| size | Icon size (px) | `Number` | `20` |
|
||||
| color | Selected color | `String` | `#ffd21e` |
|
||||
| void-color | Void color | `String` | `#c7c7c7` |
|
||||
| disabled-color | Disabled color | `String` | `#bdbdbd` |
|
||||
| disabled | Whether to disable rate | `Boolean` | `false` |
|
||||
@ -112,6 +112,7 @@ export default {
|
||||
'en-US/pull-refresh': wrapper(r => require.ensure([], () => r(require('./en-US/pull-refresh.md')), 'en-US/pull-refresh')),
|
||||
'en-US/quickstart': wrapper(r => require.ensure([], () => r(require('./en-US/quickstart.md')), 'en-US/quickstart')),
|
||||
'en-US/radio': wrapper(r => require.ensure([], () => r(require('./en-US/radio.md')), 'en-US/radio')),
|
||||
'en-US/rate': wrapper(r => require.ensure([], () => r(require('./en-US/rate.md')), 'en-US/rate')),
|
||||
'en-US/search': wrapper(r => require.ensure([], () => r(require('./en-US/search.md')), 'en-US/search')),
|
||||
'en-US/sku': wrapper(r => require.ensure([], () => r(require('./en-US/sku.md')), 'en-US/sku')),
|
||||
'en-US/slider': wrapper(r => require.ensure([], () => r(require('./en-US/slider.md')), 'en-US/slider')),
|
||||
|
||||
@ -31,9 +31,9 @@ export default {
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:todal="6"
|
||||
:color="color",
|
||||
:defaultColor="defaultColor"
|
||||
:count="6"
|
||||
color="#2ba"
|
||||
void-color="#ceefe8"
|
||||
/>
|
||||
```
|
||||
|
||||
@ -47,10 +47,10 @@ export default {
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前分数 | `Number` | - |
|
||||
| size | 星标大小，单位为`px` | `Number` | `20` |
|
||||
| total | 总分 | `Number` | `5` |
|
||||
| color | 选中时的星标颜色 | `String` | `#ffd21e` |
|
||||
| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` |
|
||||
| disabled-color | 不可选时的星标颜色 | `String` | `#bdbdbd` |
|
||||
| v-model | 当前分值 | `Number` | - |
|
||||
| count | 图标总数 | `Number` | `5` |
|
||||
| size | 图标大小 (px) | `Number` | `20` |
|
||||
| color | 选中时的颜色 | `String` | `#ffd21e` |
|
||||
| void-color | 未选中时的颜色 | `String` | `#c7c7c7` |
|
||||
| disabled-color | 不可选时的颜色 | `String` | `#bdbdbd` |
|
||||
| disabled | 是否禁用评分 | `Boolean` | `false` |
|
||||
|
||||
@ -438,6 +438,10 @@ module.exports = {
|
||||
path: '/progress',
|
||||
title: 'Progress'
|
||||
},
|
||||
{
|
||||
path: '/rate',
|
||||
title: 'Rate'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
title: 'Slider'
|
||||
|
||||
@ -1,33 +1,16 @@
|
||||
<template>
|
||||
<div :class="b()">
|
||||
<div
|
||||
<svg
|
||||
v-for="(isFull, index) in list"
|
||||
:fill="disabled ? disabledColor : isFull ? color : voidColor"
|
||||
viewBox="0 0 32 32"
|
||||
:style="style"
|
||||
:class="b('item')"
|
||||
v-for="(isFull, index) in starList"
|
||||
:key="index"
|
||||
:style="{
|
||||
'width': `${size}px`
|
||||
}"
|
||||
@click="selectRate(index)"
|
||||
@click="onSelect(index)"
|
||||
>
|
||||
<svg
|
||||
v-if="isFull"
|
||||
:fill="disabled ? defaultColor : color"
|
||||
viewBox="0 0 32 32"
|
||||
width="100%"
|
||||
height="100%"
|
||||
>
|
||||
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
:fill="defaultColor"
|
||||
viewBox="0 0 32 32"
|
||||
>
|
||||
<path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<path :d="isFull ? 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z' : 'M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798zM16 23.547l-6.983 3.671 1.334-7.776-5.65-5.507 7.808-1.134 3.492-7.075 3.492 7.075 7.807 1.134-5.65 5.507 1.334 7.776-6.983-3.671z'" />
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -49,7 +32,7 @@ export default create({
|
||||
type: String,
|
||||
default: '#ffd21e'
|
||||
},
|
||||
defaultColor: {
|
||||
voidColor: {
|
||||
type: String,
|
||||
default: '#c7c7c7'
|
||||
},
|
||||
@ -57,7 +40,7 @@ export default create({
|
||||
type: String,
|
||||
default: '#bdbdbd'
|
||||
},
|
||||
total: {
|
||||
count: {
|
||||
type: Number,
|
||||
default: 5
|
||||
},
|
||||
@ -68,13 +51,19 @@ export default create({
|
||||
},
|
||||
|
||||
computed: {
|
||||
starList() {
|
||||
return new Array(this.total).fill(false).map((value, index) => index < this.value);
|
||||
style() {
|
||||
return {
|
||||
width: this.size + 'px'
|
||||
};
|
||||
},
|
||||
|
||||
list() {
|
||||
return new Array(this.count).fill(false).map((value, index) => index < this.value);
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
selectRate(index) {
|
||||
onSelect(index) {
|
||||
if (!this.disabled) {
|
||||
this.$emit('input', index + 1);
|
||||
}
|
||||
|
||||
@ -4,7 +4,8 @@
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
margin: 0 2px;
|
||||
padding: 0 2px;
|
||||
display: inline-block;
|
||||
box-sizing: content-box;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user