From 0ed0337de05ce35a540514f506b8a699af16e83e Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Sun, 16 Aug 2020 15:29:57 +0800
Subject: [PATCH] feat: migrate Stepper component
---
components.js | 1 +
docs/markdown/changelog-v3.zh-CN.md | 2 ++
src/stepper/README.md | 2 +-
src/stepper/README.zh-CN.md | 2 +-
src/stepper/demo/index.vue | 2 +-
src/stepper/index.js | 50 +++++++++++++++++------------
vant.config.js | 16 ++++-----
7 files changed, 44 insertions(+), 31 deletions(-)
diff --git a/components.js b/components.js
index 1e669fd16..3f9709669 100644
--- a/components.js
+++ b/components.js
@@ -55,4 +55,5 @@ module.exports = [
'number-keyboard',
'password-input',
'search',
+ 'stepper',
];
diff --git a/docs/markdown/changelog-v3.zh-CN.md b/docs/markdown/changelog-v3.zh-CN.md
index a9a0169b5..d9d1433d4 100644
--- a/docs/markdown/changelog-v3.zh-CN.md
+++ b/docs/markdown/changelog-v3.zh-CN.md
@@ -47,6 +47,8 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
- Field
- Radio
- RadioGroup
+- Search
+- Stepper
- Switch
- Sidebar
diff --git a/src/stepper/README.md b/src/stepper/README.md
index 9d2f81b47..93be8cfb4 100644
--- a/src/stepper/README.md
+++ b/src/stepper/README.md
@@ -72,7 +72,7 @@ export default {
### Async Change
```html
-<van-stepper :value="value" async-change @change="onChange" />
+<van-stepper :model-value="value" async-change @change="onChange" />
```
```js
diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md
index 9043c3394..e17b6a46b 100644
--- a/src/stepper/README.zh-CN.md
+++ b/src/stepper/README.zh-CN.md
@@ -94,7 +94,7 @@ export default {
如果需要异步地修改输入框的值，可以设置`async-change`属性，并在`change`事件中手动修改`value`
```html
-<van-stepper :value="value" async-change @change="onChange" />
+<van-stepper :model-value="value" async-change @change="onChange" />
```
```js
diff --git a/src/stepper/demo/index.vue b/src/stepper/demo/index.vue
index 7119ee440..399cdb52f 100644
--- a/src/stepper/demo/index.vue
+++ b/src/stepper/demo/index.vue
@@ -33,7 +33,7 @@
</van-cell>
<van-cell center :title="t('asyncChange')">
- <van-stepper :value="stepper6" async-change @change="onChange" />
+ <van-stepper :model-value="stepper6" async-change @change="onChange" />
</van-cell>
<van-cell v-if="!isWeapp" center :title="t('roundTheme')">
diff --git a/src/stepper/index.js b/src/stepper/index.js
index ecf0b0942..4212756bd 100644
--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@@ -24,10 +24,10 @@ export default createComponent({
mixins: [FieldMixin],
props: {
- value: null,
theme: String,
integer: Boolean,
disabled: Boolean,
+ modelValue: null,
allowEmpty: Boolean,
inputWidth: [Number, String],
buttonSize: [Number, String],
@@ -71,12 +71,24 @@ export default createComponent({
},
},
+ emits: [
+ 'plus',
+ 'blur',
+ 'minus',
+ 'focus',
+ 'change',
+ 'overlimit',
+ 'update:modelValue',
+ ],
+
data() {
- const defaultValue = isDef(this.value) ? this.value : this.defaultValue;
+ const defaultValue = isDef(this.modelValue)
+ ? this.value
+ : this.defaultValue;
const value = this.format(defaultValue);
- if (!equal(value, this.value)) {
- this.$emit('input', value);
+ if (!equal(value, this.modelValue)) {
+ this.$emit('update:modelValue', value);
}
return {
@@ -129,14 +141,14 @@ export default createComponent({
integer: 'check',
decimalLength: 'check',
- value(val) {
+ modelValue(val) {
if (!equal(val, this.currentValue)) {
this.currentValue = this.format(val);
}
},
currentValue(val) {
- this.$emit('input', val);
+ this.$emit('update:modelValue', val);
this.$emit('change', val, { name: this.name });
},
},
@@ -194,7 +206,7 @@ export default createComponent({
emitChange(value) {
if (this.asyncChange) {
- this.$emit('input', value);
+ this.$emit('update:modelValue', value);
this.$emit('change', value, { name: this.name });
} else {
this.currentValue = value;
@@ -272,20 +284,18 @@ export default createComponent({
render() {
const createListeners = (type) => ({
- on: {
- click: (e) => {
- // disable double tap scrolling on mobile safari
- e.preventDefault();
- this.type = type;
- this.onChange();
- },
- touchstart: () => {
- this.type = type;
- this.onTouchStart();
- },
- touchend: this.onTouchEnd,
- touchcancel: this.onTouchEnd,
+ onClick: (e) => {
+ // disable double tap scrolling on mobile safari
+ e.preventDefault();
+ this.type = type;
+ this.onChange();
},
+ onTouchstart: () => {
+ this.type = type;
+ this.onTouchStart();
+ },
+ onTouchend: this.onTouchEnd,
+ onTouchcancel: this.onTouchEnd,
});
return (
diff --git a/vant.config.js b/vant.config.js
index 4b55b09cd..74e1f7709 100644
--- a/vant.config.js
+++ b/vant.config.js
@@ -163,10 +163,10 @@ module.exports = {
path: 'slider',
title: 'Slider 滑块',
},
- // {
- // path: 'stepper',
- // title: 'Stepper 步进器',
- // },
+ {
+ path: 'stepper',
+ title: 'Stepper 步进器',
+ },
{
path: 'switch',
title: 'Switch 开关',
@@ -497,10 +497,10 @@ module.exports = {
path: 'slider',
title: 'Slider',
},
- // {
- // path: 'stepper',
- // title: 'Stepper',
- // },
+ {
+ path: 'stepper',
+ title: 'Stepper',
+ },
{
path: 'switch',
title: 'Switch',