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

feat(Stepper): add decimalLength prop (#2087)

Browse Source
This commit is contained in:
ShuaiKang Zhang 2019-09-24 13:10:51 +08:00 committed by neverland
parent 338df00e8f
commit f3c063ae0d
3 changed files with 33 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
example/pages/stepper/index.wxml
View File

@ -18,6 +18,10 @@
<van-stepper value="{{ 1 }}" disabled /> <van-stepper value="{{ 1 }}" disabled />
</van-cell> </van-cell>
<van-cell center title="固定小数位数">
<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
</van-cell>
<van-cell center title="异步变更"> <van-cell center title="异步变更">
<van-stepper <van-stepper
value="{{ value }}" value="{{ value }}"

9
packages/stepper/README.md
View File

@ -64,6 +64,14 @@ Page({
<van-stepper value="{{ 1 }}" disabled /> <van-stepper value="{{ 1 }}" disabled />
``` ```
### 固定小数位数
通过设置`decimal-length`属性可以保留固定的小数位数
```html
<van-stepper value="{{ 1 }}" step="0.2" decimal-length="{{ 1 }}" />
```
### 异步变更 ### 异步变更
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value` 如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
@ -116,6 +124,7 @@ Page({
| button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | *string \| number* | `28px` | - | | button-size | 按钮大小，默认单位为 `px`，输入框高度会和按钮大小保持一致 | *string \| number* | `28px` | - |
| show-plus | 是否显示增加按钮 | *boolean* | `true` | - | | show-plus | 是否显示增加按钮 | *boolean* | `true` | - |
| show-minus | 是否显示减少按钮 | *boolean* | `true` | - | | show-minus | 是否显示减少按钮 | *boolean* | `true` | - |
| decimal-length | 固定显示的小数位数 | *number* | - | - |
### Events ### Events

23
packages/stepper/index.ts
View File

@ -1,6 +1,6 @@
import { VantComponent } from '../common/component'; import { VantComponent } from '../common/component';
import { Weapp } from 'definitions/weapp'; import { Weapp } from 'definitions/weapp';
import { addUnit } from '../common/utils'; import { addUnit, isDef } from '../common/utils';
const LONG_PRESS_START_TIME = 600; const LONG_PRESS_START_TIME = 600;
const LONG_PRESS_INTERVAL = 200; const LONG_PRESS_INTERVAL = 200;
@ -18,6 +18,7 @@ VantComponent({
buttonSize: null, buttonSize: null,
asyncChange: Boolean, asyncChange: Boolean,
disableInput: Boolean, disableInput: Boolean,
decimalLength: Number,
min: { min: {
type: null, type: null,
value: 1 value: 1
@ -101,7 +102,17 @@ VantComponent({
// limit value range // limit value range
range(value) { range(value) {
value = String(value).replace(/[^0-9.-]/g, ''); value = String(value).replace(/[^0-9.-]/g, '');
return Math.max(Math.min(this.data.max, value), this.data.min);
// format range
value = value === '' ? 0 : +value;
value = Math.max(Math.min(this.data.max, value), this.data.min);
// format decimal
if (isDef(this.data.decimalLength)) {
value = value.toFixed(this.data.decimalLength);
}
return value;
}, },
onInput(event: Weapp.Event) { onInput(event: Weapp.Event) {
@ -117,7 +128,13 @@ VantComponent({
} }
const diff = type === 'minus' ? -this.data.step : +this.data.step; const diff = type === 'minus' ? -this.data.step : +this.data.step;
const value = Math.round((+this.data.value + diff) * 100) / 100;
let value = +this.data.value + diff;
if (!isDef(this.data.decimalLength)) {
value = Math.round(value * 100) / 100;
}
this.triggerInput(this.range(value)); this.triggerInput(this.range(value));
this.$emit(type); this.$emit(type);
}, },