Merge remote-tracking branch 'main/dev' into dev

docs/examples-docs/sku.md

@@ -16,6 +16,8 @@ export default {
       goodsId: data.goods_id,
       quota: data.quota,
       quotaUsed: data.quota_used,
+      disableStepperInput: true,
+      resetStepperOnHide: true,
       initialSku: {
         s1: '30349',
         s2: '1193'
@@ -62,10 +64,10 @@ Vue.component(Sku.name, Sku);
       :goods="goods"
       :goods-id="goodsId"
       :hide-stock="sku.hide_stock"
-      :show-add-cart-btn="true"
       :quota="quota"
       :quota-used="quotaUsed"
-      :reset-stepper-on-hide="true"
+      :reset-stepper-on-hide="resetStepperOnHide"
+      :disable-stepper-input="disableStepperInput"
       @buy-clicked="handleBuyClicked"
       @add-cart="handleAddCartClicked"
     >
@@ -130,6 +132,7 @@ Vue.component(Sku.name, Sku);
 | quota | 限购数(0表示不限购) | Number  | 0 |  否 |
 | quotaUsed | 已经购买过的数量 | Number  | 0 |  否 |
 | resetStepperOnHide | 窗口隐藏时重置选择的商品数量 | Boolean  | false |  否 |
+| disableStepperInput | 是否禁用sku中stepper的input框 | Boolean | false | 否 |
 | stepperTitle | 数量选择组件左侧文案 | String  | '购买数量' |  否 |
 | add-cart | 点击添加购物车回调 | Function(skuData: Object)  | - |  否 |
 | buy-clicked | 点击购买回调 | Function(skuData: Object)  | - |  否 |

docs/examples-docs/stepper.md

@@ -70,6 +70,7 @@ Vue.component(Stepper.name, Stepper);
 | defaultValue | 默认值 | `String | Number` | `1` | - |
 | step | 步数 | `String | Number` | `1` | - |
 | disabled | 是否禁用 | `Boolean` | `false` | - | 
+| disableInput | 是否禁用input框 | `Boolean` | `false` | - |
 
 ### Event
 

docs/examples-docs/waterfall.md

@@ -15,7 +15,7 @@ Waterfall.install(Vue);
 
 #### 局部注册
 
-如果你只是想在某个组件中使用`Waterfall`，你可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
+如果你只是想在某个组件中使用`Waterfall`，可以在对应组件中注册`Waterfall`指令，这样只能在你注册的组件中使用`Waterfall`：
 
 ```js
 import { Waterfall } from 'vant';
@@ -34,7 +34,7 @@ export default {
 export default {
   data() {
     return {
-      list: [1, 2, 3, 4, 5],
+      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
       loading: false,
       finished: false
     };
@@ -54,7 +54,7 @@ export default {
           this.list.push(lastNumber);
         }
         this.loading = false;
-      }, 2000);
+      }, 200);
     }
   },
   computed: {
@@ -67,15 +67,16 @@ export default {
 
 <style>
 .demo-waterfall {
-  .waterfall {
+  ul {
     max-height: 360px;
     overflow: scroll;
     border-top: 1px solid #e5e5e5;
   }
-  .waterfall-item {
+  li {
     line-height: 50px;
     border-bottom: 1px solid #e5e5e5;
     background: #fff;
+    text-align: center;
   }
   .page-desc {
     padding: 5px 0;
@@ -84,38 +85,20 @@ export default {
     text-align: center;
     color: #666;
   }
-  .van-loading {
-    margin: 10px auto;
-  }
 }
 </style>
 
 #### 基础用法
-
+使用 `v-waterfall-lower` 监听滚动到达底部，并执行相应函数。若是函数执行中需要异步加载数据，可以将 `waterfall-disabled` 指定的值置为 false，禁止 `v-waterfall-lower` 监听滚动事件
 :::demo 基础用法
 ```html
 <p class="page-desc">当即将滚动到元素底部时，会自动加载更多</p>
-<div class="waterfall">
+<ul
-  <div
   v-waterfall-lower="loadMore"
   waterfall-disabled="isWaterfallDisabled"
-    waterfall-offset="400"
+  waterfall-offset="400">
-  >
+  <li v-for="(item, index) in list">{{ item }}</li>
-    <div
+</ul>
-      class="waterfall-item"
-      v-for="(item, index) in list"
-      :key="index"
-      style="text-align: center;"
-    >
-      {{ item }}
-    </div>
-    <van-loading
-      v-if="loading"
-      :type="'circle'"
-      :color="'black'"
-    ></van-loading>
-  </div>
-</div>
 ```
 :::
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "有赞vue wap组件库",
   "main": "lib/vant.js",
   "style": "lib/vant-css/index.css",

packages/index.js

@@ -54,7 +54,7 @@ import TreeSelect from './tree-select';
 import Uploader from './uploader';
 import Waterfall from './waterfall';
 
-const version = '0.9.8';
+const version = '0.9.9';
 const components = [
   Actionsheet,
   AddressEdit,

packages/sku/components/SkuStepper.vue

@@ -2,7 +2,14 @@
   <div class="van-sku-stepper-stock">
     <div class="van-sku-stepper-container">
       <div class="van-sku__stepper-title">{{ stepperTitle }}：</div>
-      <van-stepper v-model="currentNum" :min="1" :max="stepperLimit" class="van-sku__stepper" @overlimit="handleOverLimit"></van-stepper>
+      <van-stepper
+        class="van-sku__stepper"
+        v-model="currentNum"
+        :min="1"
+        :max="stepperLimit"
+        :disableInput="disableStepperInput"
+        @overlimit="handleOverLimit">
+      </van-stepper>
     </div>
     <div v-if="!hideStock" class="van-sku__stock">剩余{{ stock }}件</div>
     <div v-if="quota > 0" class="van-sku__quota">每人限购{{ quota }}件</div>
@@ -34,6 +41,10 @@ export default {
       type: Boolean,
       default: false
     },
+    disableStepperInput: {
+      type: Boolean,
+      default: false
+    },
     stepperTitle: {
       type: String,
       default: DEFAULT_BUY_TEXT

packages/sku/containers/SkuContainer.vue

@@ -45,6 +45,7 @@
               :skuStockNum="sku.stock_num"
               :quota="quota"
               :quotaUsed="quotaUsed"
+              :disableStepperInput="disableStepperInput"
               :hideStock="hideStock">
             </van-sku-stepper>
           </slot>
@@ -133,6 +134,7 @@ export default {
       default: 200
     },
     resetStepperOnHide: Boolean,
+    disableStepperInput: Boolean,
     messagePlaceholderMap: {
       type: Object,
       default() {

packages/stepper/index.vue

@@ -8,11 +8,11 @@
       }">
     </button>
     <input
-      type="text"
+      type="number"
       class="van-stepper__input"
       :value="currentValue"
       @input="handleInputChange"
-      :disabled="disabled">
+      :disabled="disabled || disableInput">
     <button
       @click="handleChange('plus')"
       class="van-stepper__stepper van-stepper__plus"
@@ -42,6 +42,7 @@ export default {
       default: 1
     },
     disabled: Boolean,
+    disableInput: Boolean,
     defaultValue: {
       type: [String, Number],
       default: 1
@@ -91,8 +92,13 @@ export default {
   methods: {
     // 纠正value值
     correctValue(value) {
+      if (Number.isNaN(value)) {
+        value = this.min;
+      } else {
         value = Math.max(this.min, value);
         value = Math.min(this.max, value);
+      }
+
       return value;
     },
     handleInputChange(event) {

packages/vant-css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vant-css",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "vant css.",
   "main": "lib/index.css",
   "style": "lib/index.css",

packages/waterfall/directive.js

@@ -42,7 +42,7 @@ function handleScrollEvent() {
   // 判断是否到了底
   let needLoadMoreToLower = false;
   if (element === scrollEventTarget) {
-    needLoadMoreToLower = scrollEventTarget.scollHeight - targetBottom < this.offset;
+    needLoadMoreToLower = scrollEventTarget.scrollHeight - targetBottom < this.offset;
   } else {
     const elementBottom = Utils.getElementTop(element) - Utils.getElementTop(scrollEventTarget) + Utils.getVisibleHeight(element);
     needLoadMoreToLower = elementBottom - Utils.getVisibleHeight(scrollEventTarget) < this.offset;

test/unit/specs/stepper.spec.js

@@ -60,6 +60,17 @@ describe('Stepper', () => {
     });
   });
 
+  it('only disable stepper input', () => {
+    wrapper = mount(Stepper, {
+      propsData: {
+        disableInput: true
+      }
+    });
+
+    const input = wrapper.find('.van-stepper__input')[0];
+    expect(input.hasAttribute('disabled', 'disabled')).to.be.true;
+  });
+
   it('update stepper value use v-model', (done) => {
     wrapper = mount(Stepper, {
       propsData: {
@@ -96,9 +107,16 @@ describe('Stepper', () => {
     wrapper.vm.$nextTick(() => {
       expect(wrapper.vm.currentValue).to.equal(30);
       expect(eventStub.calledWith('input'));
+
+      // value设置非数字时，则使用设置的最小值（默认1）
+      wrapper.vm.value = 'abc';
+      wrapper.update();
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.vm.currentValue).to.equal(1);
         done();
       });
     });
+  });
 
   it('handle when input change', (done) => {
     wrapper = mount(Stepper, {