mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[Improvement] Rate: rename component (#1002)
This commit is contained in:
neverland
GitHub
parent
a85747a248
commit
967c5339b8
@ -57,9 +57,9 @@ export default {
|
||||
'progress': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/progress'), 'progress')), 'progress')),
|
||||
'pull-refresh': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/pull-refresh'), 'pull-refresh')), 'pull-refresh')),
|
||||
'radio': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/radio'), 'radio')), 'radio')),
|
||||
'rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/rate'), 'rate')), 'rate')),
|
||||
'search': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/search'), 'search')), 'search')),
|
||||
'sku': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/sku'), 'sku')), 'sku')),
|
||||
'star-rate': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/star-rate'), 'star-rate')), 'star-rate')),
|
||||
'slider': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/slider'), 'slider')), 'slider')),
|
||||
'stepper': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/stepper'), 'stepper')), 'stepper')),
|
||||
'steps': asyncWrapper(r => require.ensure([], () => r(componentWrapper(require('./views/steps'), 'steps')), 'steps')),
|
||||
|
||||
52
docs/demos/views/rate.vue
Normal file
52
docs/demos/views/rate.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<van-rate v-model="valueA" />
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<van-rate
|
||||
v-model="valueB"
|
||||
:size="25"
|
||||
:todal="6"
|
||||
:color="'#2ba'"
|
||||
:default-color="'#ceefe8'"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<van-rate disabled v-model="valueC" />
|
||||
</demo-block>
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
disabled: '禁用状态',
|
||||
customColor: '自定义颜色'
|
||||
},
|
||||
'en-US': {
|
||||
disabled: 'Disabled',
|
||||
customColor: 'Custom Color'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
valueA: 3,
|
||||
valueB: 4,
|
||||
valueC: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-rate {
|
||||
.van-rate {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,83 +0,0 @@
|
||||
<template>
|
||||
<demo-section>
|
||||
<demo-block :title="$t('basicUsage')">
|
||||
<div class="padding-15">
|
||||
<van-star-rate
|
||||
:total="totalA"
|
||||
v-model="valueA"
|
||||
:size="size"
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('customColor')">
|
||||
<div class="padding-15">
|
||||
<van-star-rate
|
||||
:total="totalB"
|
||||
v-model="valueB"
|
||||
:size="24"
|
||||
:color="'#2ba'"
|
||||
:default-color="'#ceefe8'"
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
<demo-block :title="$t('disabled')">
|
||||
<div class="padding-15">
|
||||
<van-star-rate
|
||||
disabled
|
||||
:total="totalC"
|
||||
v-model="valueC"
|
||||
/>
|
||||
</div>
|
||||
</demo-block>
|
||||
|
||||
</demo-section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
i18n: {
|
||||
'zh-CN': {
|
||||
disabled: '不可操作状态',
|
||||
customColor: '自定义颜色'
|
||||
},
|
||||
'en-US': {
|
||||
disabled: 'Disabled Component',
|
||||
customColor: 'Custom Color'
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
size: 30,
|
||||
totalA: 7,
|
||||
valueA: 5,
|
||||
totalB: 6,
|
||||
valueB: 4,
|
||||
totalC: 8,
|
||||
valueC: 2
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
onSearch() {
|
||||
Toast(this.value);
|
||||
},
|
||||
onCancel() {
|
||||
Toast(this.$t('cancel'));
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="postcss">
|
||||
.demo-search {
|
||||
.van-search__action div {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
.padding-15 {
|
||||
padding: 0 15px;
|
||||
}
|
||||
</style>
|
||||
@ -54,6 +54,7 @@ export default {
|
||||
'zh-CN/pull-refresh': wrapper(r => require.ensure([], () => r(require('./zh-CN/pull-refresh.md')), 'zh-CN/pull-refresh')),
|
||||
'zh-CN/quickstart': wrapper(r => require.ensure([], () => r(require('./zh-CN/quickstart.md')), 'zh-CN/quickstart')),
|
||||
'zh-CN/radio': wrapper(r => require.ensure([], () => r(require('./zh-CN/radio.md')), 'zh-CN/radio')),
|
||||
'zh-CN/rate': wrapper(r => require.ensure([], () => r(require('./zh-CN/rate.md')), 'zh-CN/rate')),
|
||||
'zh-CN/search': wrapper(r => require.ensure([], () => r(require('./zh-CN/search.md')), 'zh-CN/search')),
|
||||
'zh-CN/sku': wrapper(r => require.ensure([], () => r(require('./zh-CN/sku.md')), 'zh-CN/sku')),
|
||||
'zh-CN/slider': wrapper(r => require.ensure([], () => r(require('./zh-CN/slider.md')), 'zh-CN/slider')),
|
||||
|
||||
56
docs/markdown/zh-CN/rate.md
Normal file
56
docs/markdown/zh-CN/rate.md
Normal file
@ -0,0 +1,56 @@
|
||||
## Rate 评分
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { Rate } from 'vant';
|
||||
|
||||
Vue.use(Rate);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 3
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-rate
|
||||
v-model="value"
|
||||
:size="25"
|
||||
:todal="6"
|
||||
:color="color",
|
||||
:defaultColor="defaultColor"
|
||||
/>
|
||||
```
|
||||
|
||||
#### 禁用状态
|
||||
|
||||
```html
|
||||
<van-rate v-model="value" disabled />
|
||||
```
|
||||
|
||||
### Rate API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
|-----------|-----------|-----------|-------------|
|
||||
| v-model | 当前分数 | `Number` | - |
|
||||
| size | 星标大小，单位为`px` | `Number` | `20` |
|
||||
| total | 总分 | `Number` | `5` |
|
||||
| color | 选中时的星标颜色 | `String` | `#ffd21e` |
|
||||
| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` |
|
||||
| disabled-color | 不可选时的星标颜色 | `String` | `#bdbdbd` |
|
||||
| disabled | 是否禁用评分 | `Boolean` | `false` |
|
||||
@ -1,92 +0,0 @@
|
||||
## StarRate 评分
|
||||
|
||||
### 使用指南
|
||||
``` javascript
|
||||
import { StarRate } from 'vant';
|
||||
|
||||
Vue.use(StarRate);
|
||||
```
|
||||
|
||||
### 代码演示
|
||||
|
||||
#### 基础用法
|
||||
|
||||
```html
|
||||
<van-star-rate
|
||||
:total="total"
|
||||
v-model="value"
|
||||
:size="30"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 30,
|
||||
value: 3,
|
||||
total: 6
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 自定义颜色
|
||||
|
||||
```html
|
||||
<van-star-rate
|
||||
:total="total"
|
||||
v-model="value"
|
||||
:size="size",
|
||||
:color="color",
|
||||
:defaultColor="defaultColor"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
size: 24,
|
||||
value: 5,
|
||||
total: 7,
|
||||
color: '#2ba',
|
||||
defaultColor: '#ceefe8'
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
#### 竖向步骤条
|
||||
```html
|
||||
<van-star-rate
|
||||
disabled
|
||||
:total="total"
|
||||
v-model="value"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
value: 2,
|
||||
total: 6
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### StarRate API
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 可选值 |
|
||||
|-----------|-----------|-----------|-------------|-------------|
|
||||
| size | 星标大小，单位为`px` | `Number` | 20 | - |
|
||||
| total | 总分，默认为5 | `Number` | 5 | - |
|
||||
| value | 分数 | `Number` | 0 | - |
|
||||
| color | 选中时的星标颜色 | `String` | `#ffd21e` | - |
|
||||
| default-color | 未选中时的星标颜色 | `String` | `#c7c7c7` | - |
|
||||
| disabled-color | 不可选时的星标颜色 | `String` | `bdbdbd` | - |
|
||||
| disabled | 是否可修改 | `Boolean` | false | - |
|
||||
|
||||
@ -137,8 +137,8 @@ module.exports = {
|
||||
title: 'Progress - 进度条'
|
||||
},
|
||||
{
|
||||
path: '/star-rate',
|
||||
title: 'StarRate - 评分'
|
||||
path: '/rate',
|
||||
title: 'Rate - 评分'
|
||||
},
|
||||
{
|
||||
path: '/slider',
|
||||
|
||||
@ -45,10 +45,10 @@ import Progress from './progress';
|
||||
import PullRefresh from './pull-refresh';
|
||||
import Radio from './radio';
|
||||
import RadioGroup from './radio-group';
|
||||
import Rate from './rate';
|
||||
import Row from './row';
|
||||
import Search from './search';
|
||||
import Sku from './sku';
|
||||
import StarRate from './star-rate';
|
||||
import Slider from './slider';
|
||||
import Step from './step';
|
||||
import Stepper from './stepper';
|
||||
@ -115,10 +115,10 @@ const components = [
|
||||
PullRefresh,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Rate,
|
||||
Row,
|
||||
Search,
|
||||
Sku,
|
||||
StarRate,
|
||||
Slider,
|
||||
Step,
|
||||
Stepper,
|
||||
@ -197,10 +197,10 @@ export {
|
||||
PullRefresh,
|
||||
Radio,
|
||||
RadioGroup,
|
||||
Rate,
|
||||
Row,
|
||||
Search,
|
||||
Sku,
|
||||
StarRate,
|
||||
Slider,
|
||||
Step,
|
||||
Stepper,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="van-star">
|
||||
<div :class="b()">
|
||||
<div
|
||||
class="van-star-item van-star--full"
|
||||
:class="b('item')"
|
||||
v-for="(isFull, index) in starList"
|
||||
:key="index"
|
||||
:style="{
|
||||
@ -12,17 +12,17 @@
|
||||
<svg
|
||||
v-if="isFull"
|
||||
:fill="disabled ? defaultColor : color"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32"
|
||||
width="100%"
|
||||
height="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"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 32 32" >
|
||||
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>
|
||||
@ -34,7 +34,7 @@
|
||||
import create from '../utils/create';
|
||||
|
||||
export default create({
|
||||
name: 'star-rate',
|
||||
name: 'rate',
|
||||
|
||||
props: {
|
||||
size: {
|
||||
@ -75,8 +75,9 @@ export default create({
|
||||
|
||||
methods: {
|
||||
selectRate(index) {
|
||||
if (this.disabled) return;
|
||||
this.$emit('input', index + 1);
|
||||
if (!this.disabled) {
|
||||
this.$emit('input', index + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<div :class="b('pane')" v-show="isSelected">
|
||||
<keep-alive>
|
||||
<slot v-if="isSelected || slotInited" />
|
||||
</keep-alive>
|
||||
<slot v-if="slotInited" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@ -18,13 +18,13 @@
|
||||
@import './search.css';
|
||||
@import './pagination.css';
|
||||
@import './panel.css';
|
||||
@import './rate.css';
|
||||
@import './steps.css';
|
||||
@import './tag.css';
|
||||
@import './tab.css';
|
||||
@import './tabbar.css';
|
||||
@import './image-preview.css';
|
||||
@import './stepper.css';
|
||||
@import './star-rate.css';
|
||||
@import './progress.css';
|
||||
@import './swipe.css';
|
||||
@import './slider.css';
|
||||
|
||||
10
packages/vant-css/src/rate.css
Normal file
10
packages/vant-css/src/rate.css
Normal file
@ -0,0 +1,10 @@
|
||||
@import "./common/var.css";
|
||||
|
||||
.van-rate {
|
||||
user-select: none;
|
||||
|
||||
&__item {
|
||||
margin: 0 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.van-star {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.van-star-item {
|
||||
margin: 0 2px;
|
||||
display: inline-block;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user