blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-05-22 14:39:16 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Stepper: jsx (#2624)

Browse Source
This commit is contained in:
neverland 2019-01-26 09:01:58 +08:00 committed by GitHub
parent 6068f44a3f
commit 8c8973be06
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 100 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/stepper/demo/index.vue
View File

@ -52,8 +52,10 @@ export default {
};
},
methods: {
onChange(event) {
this.$toast(`change: ${event}`);
onChange(value) {
setTimeout(() => {
this.stepper2 = value;
}, 500);
}
}
};

30
packages/stepper/en-US.md
View File

@ -31,6 +31,34 @@ export default {
<van-stepper v-model="value" disabled />
```
#### Async Change
```html
<van-stepper
:value="value"
async-change
@change="onChange"
/>
```
```javascript
export default {
data() {
return {
value: 1
}
},
methods: {
onChange(value) {
setTimeout(() => {
this.value = value;
}, 500);
}
}
}
```
#### Advanced Usage
```html
@ -55,7 +83,7 @@ export default {
| integer | Whether to allow only integers | `Boolean` | `false` |
| disabled | Disable value change | `Boolean` | `false` |
| disable-input | Disable input | `Boolean` | `false` |
| async-change | not change input value, only emit event | `Boolean` | `false` | - |
| async-change | Whether to enable async change | `Boolean` | `false` | - |
### Event

58
packages/stepper/index.vue → packages/stepper/index.js
View File

@ -1,30 +1,8 @@
<template>
<div :class="b()">
<button
:class="b('minus', { disabled: minusDisabled })"
@click="onChange('minus')"
/>
<input
type="number"
:class="b('input')"
:value="currentValue"
:disabled="disabled || disableInput"
@input="onInput"
@blur="onBlur"
>
<button
:class="b('plus', { disabled: plusDisabled })"
@click="onChange('plus')"
/>
</div>
</template>
import { use, isDef } from '../utils';
<script>
import create from '../utils/create';
export default create({
name: 'stepper',
const [sfc, bem] = use('stepper');
export default sfc({
props: {
value: null,
integer: Boolean,
@ -50,7 +28,7 @@ export default create({
},
data() {
const value = this.range(this.isDef(this.value) ? this.value : this.defaultValue);
const value = this.range(isDef(this.value) ? this.value : this.defaultValue);
if (value !== +this.value) {
this.$emit('input', value);
}
@ -138,6 +116,32 @@ export default create({
event.target.value = this.currentValue;
}
}
},
render(h) {
const onChange = type => () => {
this.onChange(type);
};
return (
<div class={bem()}>
<button
class={bem('minus', { disabled: this.minusDisabled })}
onClick={onChange('minus')}
/>
<input
type="number"
class={bem('input')}
value={this.currentValue}
disabled={this.disabled || this.disableInput}
onInput={this.onInput}
onBlur={this.onBlur}
/>
<button
class={bem('plus', { disabled: this.plusDisabled })}
onClick={onChange('plus')}
/>
</div>
);
}
});
</script>

8
packages/stepper/test/__snapshots__/demo.spec.js.snap
View File

@ -3,16 +3,16 @@
exports[`renders demo correctly 1`] = `
<div>
<div>
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" value="1" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" value="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
</div>
<div>
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" value="1" class="van-stepper__input"> <button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" value="1" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
</div>
<div>
<div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="10" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
<div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="10" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
</div>
<div>
<div class="van-stepper"><button class="van-stepper__minus"></button> <input type="number" value="9" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>
<div class="van-stepper"><button class="van-stepper__minus"></button><input type="number" value="9" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
</div>
</div>
`;

4
packages/stepper/test/__snapshots__/index.spec.js.snap
View File

@ -1,5 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" class="van-stepper__input"> <button class="van-stepper__plus"></button></div>`;
exports[`disable stepper input 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button> <input type="number" disabled="disabled" class="van-stepper__input"> <button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
exports[`disabled stepper 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;

31
packages/stepper/zh-CN.md
View File

@ -26,12 +26,41 @@ export default {
```
#### 禁用状态
通过设置`disabled`属性来禁用 stepper
```html
<van-stepper v-model="value" disabled />
```
#### 异步变更
```html
<van-stepper
:value="value"
async-change
@change="onChange"
/>
```
```javascript
export default {
data() {
return {
value: 1
}
},
methods: {
onChange(value) {
setTimeout(() => {
this.value = value;
}, 500);
}
}
}
```
#### 高级用法
可以对组件设置`step`、`min`、`max`属性
@ -57,7 +86,7 @@ export default {
| integer | 是否只允许输入整数 | `Boolean` | `false` | 1.1.1 |
| disabled | 是否禁用步进器 | `Boolean` | `false` | - |
| disable-input | 是否禁用输入框 | `Boolean` | `false` | - |
| async-change | 异步变更，为 `true` 时input值不变化，仅触发事件 | `Boolean` | `false` | - |
| async-change | 是否开启异步变更，开启后需要手动控制输入值 | `Boolean` | `false` | - |
### Event