diff --git a/example/pages/overlay/index.wxss b/example/pages/overlay/index.wxss new file mode 100644 index 00000000..70ef6a9d --- /dev/null +++ b/example/pages/overlay/index.wxss @@ -0,0 +1 @@ +/* pages/overlay/index.wxss */ \ No newline at end of file diff --git a/packages/stepper/README.md b/packages/stepper/README.md index 94b4a7e8..913f2005 100644 --- a/packages/stepper/README.md +++ b/packages/stepper/README.md @@ -29,7 +29,7 @@ Page({ onChange(event) { console.log(event.detail); } -}) +}); ``` ### 步长设置 @@ -69,11 +69,7 @@ Page({ 如果需要异步地修改输入框的值,可以设置`async-change`属性,并在`change`事件中手动修改`value` ```html - + ``` ```js @@ -98,11 +94,7 @@ Page({ 通过`input-width`属性设置输入框宽度,通过`button-size`属性设置按钮大小和输入框高度 ```html - + ``` ## API @@ -110,36 +102,39 @@ Page({ ### Props | 参数 | 说明 | 类型 | 默认值 | 版本 | -|-----------|-----------|-----------|-------------|-------------| -| name | 在表单内提交时的标识符 | *string* | - | - | -| value | 输入值 | *string \| number* | 最小值 | - | -| min | 最小值 | *string \| number* | `1` | - | -| max | 最大值 | *string \| number* | - | - | -| step | 步长 | *string \| number* | `1` | - | -| integer | 是否只允许输入整数 | *boolean* | `false` | - | -| disabled | 是否禁用 | *boolean* | `false` | - | -| disable-input | 是否禁用输入框 | *boolean* | `false` | - | -| async-change | 是否开启异步变更,开启后需要手动控制输入值 | *boolean* | `false` | - | -| input-width | 输入框宽度,须指定单位 | *string* | `30px` | - | -| show-plus | 是否显示增加按钮 | *boolean* | `true` | - | -| show-minus | 是否显示减少按钮 | *boolean* | `true` | - | +| --- | --- | --- | --- | --- | +| name | 在表单内提交时的标识符 | _string_ | - | - | +| value | 输入值 | _string \| number_ | 最小值 | - | +| min | 最小值 | _string \| number_ | `1` | - | +| max | 最大值 | _string \| number_ | - | - | +| step | 步长 | _string \| number_ | `1` | - | +| integer | 是否只允许输入整数 | _boolean_ | `false` | - | +| disabled | 是否禁用 | _boolean_ | `false` | - | +| disable-input | 是否禁用输入框 | _boolean_ | `false` | - | +| async-change | 是否开启异步变更,开启后需要手动控制输入值 | _boolean_ | `false` | - | +| input-width | 输入框宽度,默认单位为 `px` | _string \| number_ | `32px` | - | +| button-size | 按钮大小,默认单位为 `px`,输入框高度会和按钮大小保持一致 | _string \| number_ | `28px` | - | +| show-plus | 是否显示增加按钮 | _boolean_ | `true` | - | +| show-minus | 是否显示减少按钮 | _boolean_ | `true` | - | + +ååå ### Events -| 事件名 | 说明 | 回调参数 | -|-----------|-----------|-----------| -| bind:change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 | -| bind:overlimit | 点击不可用的按钮时触发 | - | -| bind:plus | 点击增加按钮时触发 | - | -| bind:minus | 点击减少按钮时触发 | - | -| bind:focus | 输入框聚焦时触发 | - | -| bind:blur | 输入框失焦时触发 | - | +| 事件名 | 说明 | 回调参数 | +| -------------- | ------------------------ | -------------------------- | +| bind:change | 当绑定值变化时触发的事件 | event.detail: 当前输入的值 | +| bind:overlimit | 点击不可用的按钮时触发 | - | +| bind:plus | 点击增加按钮时触发 | - | +| bind:minus | 点击减少按钮时触发 | - | +| bind:focus | 输入框聚焦时触发 | - | +| bind:blur | 输入框失焦时触发 | - | ### 外部样式类 -| 类名 | 说明 | -|-----------|-----------| -| custom-class | 根节点样式类 | -| input-class | 输入框样式类 | -| plus-class | 加号按钮样式类 | -| minus-class | 减号按钮样式类 | +| 类名 | 说明 | +| ------------ | -------------- | +| custom-class | 根节点样式类 | +| input-class | 输入框样式类 | +| plus-class | 加号按钮样式类 | +| minus-class | 减号按钮样式类 | diff --git a/packages/stepper/index.less b/packages/stepper/index.less index 0a9452a4..e13d36f5 100644 --- a/packages/stepper/index.less +++ b/packages/stepper/index.less @@ -70,9 +70,12 @@ &__input { display: inline-block; - box-sizing: content-box; - width: 30px; - height: 26px; + box-sizing: border-box; + // 覆盖 common style 中 input 的 min-height: 1.4rem; + // 避免 button-size 对 input 设置的 height 不生效 + min-height: 0; + width: 32px; + height: 28px; margin: 1px; padding: 1px; color: @text-color; @@ -90,4 +93,4 @@ background-color: @stepper-input-disabled-color; } } -} +} \ No newline at end of file diff --git a/packages/stepper/index.ts b/packages/stepper/index.ts index d077fe08..49b84716 100644 --- a/packages/stepper/index.ts +++ b/packages/stepper/index.ts @@ -1,20 +1,21 @@ import { VantComponent } from '../common/component'; import { Weapp } from 'definitions/weapp'; +import { addUnit } from '../common/utils'; + +const LONG_PRESS_START_TIME = 600; +const LONG_PRESS_INTERVAL = 200; VantComponent({ field: true, - classes: [ - 'input-class', - 'plus-class', - 'minus-class' - ], + classes: ['input-class', 'plus-class', 'minus-class'], props: { value: null, integer: Boolean, disabled: Boolean, - inputWidth: String, + inputWidth: null, + buttonSize: null, asyncChange: Boolean, disableInput: Boolean, min: { @@ -50,11 +51,26 @@ VantComponent({ if (typeof newValue === 'number' && +this.data.value !== newValue) { this.setData({ value: newValue }); } + }, + + inputWidth() { + this.set({ + inputStyle: this.computeInputStyle() + }); + }, + + buttonSize() { + this.set({ + inputStyle: this.computeInputStyle(), + buttonStyle: this.computeButtonStyle() + }); } }, data: { - focus: false + focus: false, + inputStyle: '', + buttonStyle: '' }, created() { @@ -93,7 +109,8 @@ VantComponent({ this.triggerInput(value); }, - onChange(type: string) { + onChange() { + const { type } = this; if (this.isDisabled(type)) { this.$emit('overlimit', type); return; @@ -105,12 +122,35 @@ VantComponent({ this.$emit(type); }, - onMinus() { - this.onChange('minus'); + longPressStep() { + this.longPressTimer = setTimeout(() => { + this.onChange(); + this.longPressStep(); + }, LONG_PRESS_INTERVAL); }, - onPlus() { - this.onChange('plus'); + onTap(event: Weapp.Event) { + const { type } = event.currentTarget.dataset; + this.type = type; + this.onChange(); + }, + + onTouchStart(event: Weapp.Event) { + clearTimeout(this.longPressTimer); + + const { type } = event.currentTarget.dataset; + this.type = type; + this.isLongPress = false; + + this.longPressTimer = setTimeout(() => { + this.isLongPress = true; + this.onChange(); + this.longPressStep(); + }, LONG_PRESS_START_TIME); + }, + + onTouchEnd() { + clearTimeout(this.longPressTimer); }, triggerInput(value: string) { @@ -118,6 +158,31 @@ VantComponent({ value: this.data.asyncChange ? this.data.value : value }); this.$emit('change', value); + }, + + computeInputStyle() { + let style = ''; + + if (this.data.inputWidth) { + style = `width: ${addUnit(this.data.inputWidth)};`; + } + + if (this.data.buttonSize) { + style += `height: ${addUnit(this.data.buttonSize)};`; + } + + return style; + }, + + computeButtonStyle() { + let style = ''; + const size = addUnit(this.data.buttonSize); + + if (this.data.buttonSize) { + style = `width: ${size};height: ${size};`; + } + + return style; } } }); diff --git a/packages/stepper/index.wxml b/packages/stepper/index.wxml index 1064208f..06480dc0 100644 --- a/packages/stepper/index.wxml +++ b/packages/stepper/index.wxml @@ -2,16 +2,20 @@