mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Rate): css variables (#4297)
* feat(Rate): css variables * fix(Rate): adjust less variables name * fix(Rate): adjust less variables name * docs(Rate): adjust doc - 示例与文档对应 - 对照vant文档做了一些调整 - 增加 `监听 change 事件` - 删除 `props` 中的版本列 * fix(Rate): adjust demo
This commit is contained in:
nemo-shen
GitHub
parent
41e8565ee4
commit
c416ff16b6
@ -1,4 +1,5 @@
|
||||
import Page from '../../common/page';
|
||||
import Toast from '../../dist/toast/toast';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
@ -8,5 +9,10 @@ Page({
|
||||
value4: 2.5,
|
||||
value5: 4,
|
||||
value6: 3,
|
||||
value8: 2,
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
Toast('当前值：' + event.detail);
|
||||
},
|
||||
});
|
||||
|
||||
@ -19,9 +19,9 @@
|
||||
custom-class="rate-position"
|
||||
model:value="{{ value3 }}"
|
||||
size="{{ 25 }}"
|
||||
color="#ee0a24"
|
||||
void-color="#eee"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -29,11 +29,9 @@
|
||||
<van-rate
|
||||
custom-class="rate-position"
|
||||
model:value="{{ value4 }}"
|
||||
size="{{ 25 }}"
|
||||
allow-half
|
||||
color="#ee0a24"
|
||||
void-color="#eee"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
@ -60,3 +58,13 @@
|
||||
readonly
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<demo-block title="监听 change 事件">
|
||||
<van-rate
|
||||
custom-class="rate-position"
|
||||
value="{{ value8 }}"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
</demo-block>
|
||||
|
||||
<van-toast id="van-toast" />
|
||||
|
||||
@ -387,6 +387,10 @@
|
||||
// Rate
|
||||
@rate-horizontal-padding: 2px;
|
||||
@rate-icon-size: 20px;
|
||||
@rate-icon-void-color: @gray-5;
|
||||
@rate-icon-full-color: @red;
|
||||
@rate-icon-disabled-color: @gray-5;
|
||||
@rate-icon-gutter: @padding-base;
|
||||
|
||||
// Switch
|
||||
@switch-width: 2em;
|
||||
|
||||
@ -53,9 +53,9 @@ Page({
|
||||
<van-rate
|
||||
value="{{ value }}"
|
||||
size="{{ 25 }}"
|
||||
color="#ee0a24"
|
||||
void-color="#eee"
|
||||
color="#ffd21e"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
```
|
||||
@ -65,15 +65,27 @@ Page({
|
||||
```html
|
||||
<van-rate
|
||||
value="{{ value }}"
|
||||
size="{{ 25 }}"
|
||||
allow-half
|
||||
color="#ee0a24"
|
||||
void-color="#eee"
|
||||
void-icon="star"
|
||||
void-color="#eee"
|
||||
bind:change="onChange"
|
||||
/>
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
value: 2.5,
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
this.setData({
|
||||
value: event.detail,
|
||||
});
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 自定义数量
|
||||
|
||||
```html
|
||||
@ -92,26 +104,46 @@ Page({
|
||||
<van-rate readonly value="{{ value }}" bind:change="onChange" />
|
||||
```
|
||||
|
||||
### 监听 change 事件
|
||||
|
||||
评分变化时，会触发 `change` 事件。
|
||||
|
||||
```html
|
||||
<van-rate value="{{ value }}" bind:change="onChange" />
|
||||
```
|
||||
|
||||
```javascript
|
||||
Page({
|
||||
data: {
|
||||
value: 2,
|
||||
},
|
||||
|
||||
onChange(event) {
|
||||
Toast('当前值：' + event.detail);
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - | - |
|
||||
| value | 当前分值 | _number_ | - | - |
|
||||
| count | 图标总数 | _number_ | `5` | - |
|
||||
| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------------- | ----------------------------------------------------------- | ------------------ | --------- |
|
||||
| name | 在表单内提交时的标识符 | _string_ | - |
|
||||
| value | 当前分值 | _number_ | - |
|
||||
| count | 图标总数 | _number_ | `5` |
|
||||
| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` |
|
||||
| gutter | 图标间距，默认单位为 `px` | _string \| number_ | `4px` |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` | - |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c7c7c7` | - |
|
||||
| icon | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star` | - |
|
||||
| void-icon | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star-o` | - |
|
||||
| allow-half | 是否允许半选 | _boolean_ | `false` | - |
|
||||
| readonly | 是否为只读状态 | _boolean_ | `false` | - |
|
||||
| disabled | 是否禁用评分 | _boolean_ | `false` | - |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` | - |
|
||||
| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` | - |
|
||||
| color | 选中时的颜色 | _string_ | `#ffd21e` |
|
||||
| void-color | 未选中时的颜色 | _string_ | `#c7c7c7` |
|
||||
| icon | 选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star` |
|
||||
| void-icon | 未选中时的图标名称或图片链接，可选值见 [Icon 组件](#/icon) | _string_ | `star-o` |
|
||||
| allow-half | 是否允许半选 | _boolean_ | `false` |
|
||||
| readonly | 是否为只读状态 | _boolean_ | `false` |
|
||||
| disabled | 是否禁用评分 | _boolean_ | `false` |
|
||||
| disabled-color | 禁用时的颜色 | _string_ | `#bdbdbd` |
|
||||
| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
|
||||
|
||||
### Events
|
||||
|
||||
|
||||
@ -8,11 +8,16 @@
|
||||
&__item {
|
||||
position: relative;
|
||||
.theme(padding, '0 @rate-horizontal-padding');
|
||||
|
||||
&:not(:last-child) {
|
||||
.theme(padding-right, '@rate-icon-gutter');
|
||||
}
|
||||
}
|
||||
|
||||
&__icon {
|
||||
display: block;
|
||||
height: 1em;
|
||||
.theme(color, '@rate-icon-void-color');
|
||||
.theme(font-size, '@rate-icon-size');
|
||||
|
||||
&--half {
|
||||
@ -21,6 +26,15 @@
|
||||
width: 0.5em;
|
||||
overflow: hidden;
|
||||
.theme(left, '@rate-horizontal-padding');
|
||||
.theme(color, '@rate-icon-full-color');
|
||||
}
|
||||
|
||||
&--full {
|
||||
.theme(color, '@rate-icon-full-color');
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
.theme(color, '@rate-icon-disabled-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -28,18 +28,9 @@ VantComponent({
|
||||
type: String,
|
||||
value: 'star-o',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: '#ffd21e',
|
||||
},
|
||||
voidColor: {
|
||||
type: String,
|
||||
value: '#c7c7c7',
|
||||
},
|
||||
disabledColor: {
|
||||
type: String,
|
||||
value: '#bdbdbd',
|
||||
},
|
||||
color: String,
|
||||
voidColor: String,
|
||||
disabledColor: String,
|
||||
count: {
|
||||
type: Number,
|
||||
value: 5,
|
||||
|
||||
@ -1,19 +1,20 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
<wxs src="../wxs/style.wxs" module="style" />
|
||||
|
||||
<view
|
||||
class="van-rate custom-class"
|
||||
class="{{ utils.bem('rate') }} custom-class"
|
||||
bind:touchmove="onTouchMove"
|
||||
>
|
||||
<view
|
||||
class="van-rate__item"
|
||||
class="{{ utils.bem('rate__item') }}"
|
||||
wx:for="{{ innerCountArray }}"
|
||||
wx:key="index"
|
||||
style="padding-right: {{ index !== count - 1 ? utils.addUnit(gutter) : '' }}"
|
||||
style="{{ style({ paddingRight: index !== count - 1 ? utils.addUnit(gutter) : null }) }}"
|
||||
>
|
||||
<van-icon
|
||||
name="{{ index + 1 <= innerValue ? icon : voidIcon }}"
|
||||
class="van-rate__icon"
|
||||
style="font-size: {{ utils.addUnit(size) }}"
|
||||
class="{{ utils.bem('rate__icon', [{ disabled, full: index + 1 <= innerValue }])}}"
|
||||
style="{{ style({ fontSize: utils.addUnit(size) }) }}"
|
||||
custom-class="icon-class"
|
||||
data-score="{{ index }}"
|
||||
color="{{ disabled ? disabledColor : index + 1 <= innerValue ? color : voidColor }}"
|
||||
@ -23,8 +24,8 @@
|
||||
<van-icon
|
||||
wx:if="{{ allowHalf }}"
|
||||
name="{{ index + 0.5 <= innerValue ? icon : voidIcon }}"
|
||||
class="{{ utils.bem('rate__icon', ['half']) }}"
|
||||
style="font-size: {{ utils.addUnit(size) }}"
|
||||
class="{{ utils.bem('rate__icon', ['half', { disabled, full: index + 0.5 <= innerValue }]) }}"
|
||||
style="{{ style({ fontSize: utils.addUnit(size) }) }}"
|
||||
custom-class="icon-class"
|
||||
data-score="{{ index - 0.5 }}"
|
||||
color="{{ disabled ? disabledColor : index + 0.5 <= innerValue ? color : voidColor }}"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user