mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
feat(Stepper): add input-widht、button-size props, support long tap gesture
This commit is contained in:
aphasic
neverland
parent
c0901b8023
commit
a967862b1d
1
example/pages/overlay/index.wxss
Normal file
1
example/pages/overlay/index.wxss
Normal file
@ -0,0 +1 @@
|
||||
/* pages/overlay/index.wxss */
|
||||
@ -29,7 +29,7 @@ Page({
|
||||
onChange(event) {
|
||||
console.log(event.detail);
|
||||
}
|
||||
})
|
||||
});
|
||||
```
|
||||
|
||||
### 步长设置
|
||||
@ -69,11 +69,7 @@ Page({
|
||||
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
|
||||
|
||||
```html
|
||||
<van-stepper
|
||||
value="{{ value }}"
|
||||
async-change
|
||||
bind:change="onChange"
|
||||
/>
|
||||
<van-stepper value="{{ value }}" async-change bind:change="onChange" />
|
||||
```
|
||||
|
||||
```js
|
||||
@ -98,11 +94,7 @@ Page({
|
||||
通过`input-width`属性设置输入框宽度，通过`button-size`属性设置按钮大小和输入框高度
|
||||
|
||||
```html
|
||||
<van-stepper
|
||||
value="{{ 1 }}"
|
||||
input-width="40px"
|
||||
button-size="32px"
|
||||
/>
|
||||
<van-stepper value="{{ 1 }}" input-width="40px" button-size="32px" />
|
||||
```
|
||||
|
||||
## 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 | 减号按钮样式类 |
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
@ -2,16 +2,20 @@
|
||||
|
||||
<view class="van-stepper custom-class">
|
||||
<view
|
||||
wx:if="{{ showMinus }}"
|
||||
data-type="minus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="minus-class {{ utils.bem('stepper__minus', { disabled: disabled || value <= min }) }}"
|
||||
style="{{ showMinus ? '' : 'display: none;' }}"
|
||||
hover-class="van-stepper__minus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onMinus"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
<input
|
||||
type="{{ integer ? 'number' : 'digit' }}"
|
||||
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
|
||||
style="{{ inputWidth ? 'width: ' + inputWidth : '' }}"
|
||||
style="{{ inputStyle }}"
|
||||
value="{{ value }}"
|
||||
focus="{{ focus }}"
|
||||
disabled="{{ disabled || disableInput }}"
|
||||
@ -20,10 +24,14 @@
|
||||
bind:blur="onBlur"
|
||||
/>
|
||||
<view
|
||||
wx:if="{{ showPlus }}"
|
||||
data-type="plus"
|
||||
style="{{ buttonStyle }}"
|
||||
class="plus-class {{ utils.bem('stepper__plus', { disabled: disabled || value >= max }) }}"
|
||||
style="{{ showPlus ? '' : 'display: none;' }}"
|
||||
hover-class="van-stepper__plus--hover"
|
||||
hover-stay-time="70"
|
||||
bind:tap="onPlus"
|
||||
bind:tap="onTap"
|
||||
bind:touchstart="onTouchStart"
|
||||
bind:touchend="onTouchEnd"
|
||||
/>
|
||||
</view>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user