Merge branch 'dev' into feature/vant_cli_2

docs/markdown/changelog.en-US.md

@@ -34,6 +34,15 @@ Upgrading the style of business components:
 - fix NumberKeyboard should not trigger blur event when hidden [\#5110](https://github.com/youzan/vant/pull/5110)
 
 
+### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
+`2019-12-03`
+
+**Features**
+
+- Stepper: add disable-plus props [\#5180](https://github.com/youzan/vant/pull/5180)
+- Stepper: add disable-minus props [\#5180](https://github.com/youzan/vant/pull/5180)
+
+
 ### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
 `2019-11-28`
 

docs/markdown/changelog.zh-CN.md

@@ -45,6 +45,15 @@ Vant 遵循 [Semver](https://semver.org/lang/zh-CN/) 语义化版本规范。
 - 修复 NumberKeyboard 在隐藏状态下也会触发 blur 事件的问题 [\#5110](https://github.com/youzan/vant/pull/5110)
 
 
+### [v2.2.16](https://github.com/youzan/vant/tree/v2.2.16)
+`2019-12-03`
+
+**Features**
+
+- Stepper: 新增 disable-plus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
+- Stepper: 新增 disable-minus 属性 [\#5180](https://github.com/youzan/vant/pull/5180)
+
+
 ### [v2.2.15](https://github.com/youzan/vant/tree/v2.2.15)
 `2019-11-28`
 

src/action-sheet/index.tsx

@@ -53,7 +53,11 @@ function ActionSheet(
       return (
         <div class={[bem('header'), BORDER_BOTTOM]}>
           {title}
-          <Icon name={props.closeIcon} class={bem('close')} onClick={onCancel} />
+          <Icon
+            name={props.closeIcon}
+            class={bem('close')}
+            onClick={onCancel}
+          />
         </div>
       );
     }
@@ -99,6 +103,7 @@ function ActionSheet(
 
     return (
       <button
+        type="button"
         class={[bem('item', { disabled }), item.className, BORDER_TOP]}
         style={{ color: item.color }}
         onClick={onClickOption}
@@ -111,7 +116,7 @@ function ActionSheet(
   function CancelText() {
     if (cancelText) {
       return (
-        <button class={bem('cancel')} onClick={onCancel}>
+        <button type="button" class={bem('cancel')} onClick={onCancel}>
           {cancelText}
         </button>
       );

src/action-sheet/test/__snapshots__/index.spec.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`callback events 1`] = `
-<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-action-sheet__item--disabled van-hairline--top">
     <div class="van-loading van-loading--circular"><span class="van-loading__spinner van-loading__spinner--circular" style="width: 20px; height: 20px;"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div>
-  </button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button class="van-action-sheet__cancel">Cancel</button></div>
+  </button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>
 `;
 
 exports[`close-icon prop 1`] = `
@@ -13,15 +13,15 @@ exports[`close-icon prop 1`] = `
 </div>
 `;
 
-exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
 
 exports[`description prop 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
-  <div class="van-action-sheet__description">This is a description</div><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
+  <div class="van-action-sheet__description">This is a description</div><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button>
 </div>
 `;
 
-exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
+exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button type="button" class="van-action-sheet__cancel">Cancel</button></div>`;
 
 exports[`render title and default slot 1`] = `
 <div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
@@ -31,4 +31,4 @@ exports[`render title and default slot 1`] = `
 </div>
 `;
 
-exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;
+exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button type="button" class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;

src/area/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -79,7 +79,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -159,8 +159,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
@@ -216,8 +216,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-area">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">

src/area/test/__snapshots__/index.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`change option 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -32,7 +32,7 @@ exports[`change option 1`] = `
 
 exports[`change option 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -62,7 +62,7 @@ exports[`change option 2`] = `
 
 exports[`change option 3`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -92,7 +92,7 @@ exports[`change option 3`] = `
 
 exports[`columns-num prop 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -116,7 +116,7 @@ exports[`columns-num prop 1`] = `
 
 exports[`reset method 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -145,7 +145,7 @@ exports[`reset method 1`] = `
 
 exports[`reset method 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -175,7 +175,7 @@ exports[`reset method 2`] = `
 
 exports[`watch areaList & code 1`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -205,7 +205,7 @@ exports[`watch areaList & code 1`] = `
 
 exports[`watch areaList & code 2`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -235,7 +235,7 @@ exports[`watch areaList & code 2`] = `
 
 exports[`watch areaList & code 3`] = `
 <div class="van-picker van-area">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/coupon-list/README.md

@@ -99,6 +99,7 @@ export default {
 | input-placeholder | Input placeholder | *string* | `Coupon code` | - |
 | currency | Currency symbol |  *string* | `¥` | - |
 | empty-image | Placeholder image when list is empty | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | - |
+| show-count | Whether to show coupon count in tab title | *boolean* | `true` | - |
 
 ### CouponList Events
 

src/coupon-list/README.zh-CN.md

@@ -101,6 +101,7 @@ export default {
 | show-exchange-bar | 是否展示兑换栏 | *boolean* | `true` | - |
 | currency | 货币符号 |  *string* | `¥` | - |
 | empty-image | 列表为空时的占位图 | *string* | `https://img.yzcdn.cn/vant/coupon-empty.png` | 2.1.0 |
+| show-count | 是否展示可用 / 不可用数量 | *boolean* | `true` | - |
 
 ### CouponList Events
 

src/coupon-list/demo/index.vue

@@ -15,6 +15,7 @@
           :coupons="coupons"
           :chosen-coupon="chosenCoupon"
           :disabled-coupons="disabledCoupons"
+          :show-count="false"
           @change="onChange"
           @exchange="onExchange"
         />

src/coupon-list/index.js

@@ -50,6 +50,10 @@ export default createComponent({
       type: Boolean,
       default: true
     },
+    showCount: {
+      type: Boolean,
+      default: true
+    },
     currency: {
       type: String,
       default: '¥'
@@ -139,7 +143,7 @@ export default createComponent({
     genExchangeButton() {
       return (
         <Button
-          size="small"
+          plain
           type="danger"
           class={bem('exchange')}
           text={this.exchangeButtonText || t('exchange')}
@@ -153,10 +157,12 @@ export default createComponent({
 
   render() {
     const { coupons, disabledCoupons } = this;
-    const title = `${this.enabledTitle || t('enable')} (${coupons.length})`;
+
-    const disabledTitle = `${this.disabledTitle || t('disabled')} (${
+    const count = this.showCount ? ` (${coupons.length})` : '';
-      disabledCoupons.length
+    const title = (this.enabledTitle || t('enable')) + count;
-    })`;
+
+    const disabledCount = this.showCount ? ` (${disabledCoupons.length})` : '';
+    const disabledTitle = (this.disabledTitle || t('disabled')) + disabledCount;
 
     const ExchangeBar = this.showExchangeBar && (
       <Field
@@ -196,7 +202,12 @@ export default createComponent({
       <Tab title={disabledTitle}>
         <div class={bem('list')} style={this.listStyle}>
           {disabledCoupons.map(coupon => (
-            <Coupon disabled key={coupon.id} coupon={coupon} currency={this.currency} />
+            <Coupon
+              disabled
+              key={coupon.id}
+              coupon={coupon}
+              currency={this.currency}
+            />
           ))}
           {!disabledCoupons.length && this.genEmpty()}
         </div>
@@ -206,7 +217,7 @@ export default createComponent({
     return (
       <div class={bem()}>
         {ExchangeBar}
-        <Tabs vModel={this.tab} class={bem('tab')} line-width={120}>
+        <Tabs vModel={this.tab} class={bem('tab')} border={false}>
           {CouponTab}
           {DisabledCouponTab}
         </Tabs>

src/coupon-list/index.less

@@ -7,11 +7,25 @@
 
   &__field {
     padding: @coupon-list-field-padding;
+
+    .van-field__control {
+      height: 34px;
+      padding-left: @padding-sm;
+      line-height: 34px;
+      background: @gray-1;
+      border-radius: 17px;
+
+      &::placeholder {
+        color: @gray-5;
+      }
+    }
   }
 
   &__exchange {
     height: @coupon-list-exchange-button-height;
+    font-size: @font-size-lg;
     line-height: @coupon-list-exchange-button-height - 2px;
+    border: 0;
   }
 
   &__list {

src/coupon-list/test/__snapshots__/index.spec.js.snap

@@ -5,15 +5,15 @@ exports[`empty-image prop 1`] = `
   <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
     <div class="van-cell__value van-cell__value--alone">
       <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
+        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
       </div>
     </div>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (0)</span></div>
-        <div role="tab" class="van-tab"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (0)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
@@ -29,7 +29,7 @@ exports[`empty-image prop 1`] = `
         <!---->
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
+  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
 </div>
 `;
 
@@ -54,15 +54,15 @@ exports[`render coupon list 1`] = `
   <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
     <div class="van-cell__value van-cell__value--alone">
       <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
+        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
       </div>
     </div>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可使用优惠券 (6)</span></div>
+        <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">可用 (6)</span></div>
-        <div role="tab" class="van-tab"><span class="van-ellipsis">不可使用优惠券 (2)</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">不可用 (2)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
@@ -73,11 +73,15 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount"></h2>
-                <p>无使用门槛</p>
+                <p class="van-coupon__condition">无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name"></h2>
+                <p class="van-coupon__name"></p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
+                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
+                  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+                      <!----></i></div>
+                </div>
               </div>
             </div>
           </div>
@@ -85,12 +89,12 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
-                <p>无使用门槛</p>
+                <p class="van-coupon__condition">无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name">name</h2>
+                <p class="van-coupon__name">name</p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
-                <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner">
+                <div role="checkbox" tabindex="0" aria-checked="true" class="van-checkbox van-coupon__corner" size="18">
                   <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked"><i class="van-icon van-icon-success" style="border-color: #ee0a24; background-color: rgb(238, 10, 36);">
                       <!----></i></div>
                 </div>
@@ -102,11 +106,15 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount"><span>¥</span> 1</h2>
-                <p>无使用门槛</p>
+                <p class="van-coupon__condition">无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name">name</h2>
+                <p class="van-coupon__name">name</p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
+                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
+                  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+                      <!----></i></div>
+                </div>
               </div>
             </div>
             <p class="van-coupon__description">description</p>
@@ -115,11 +123,15 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount"><span>¥</span> 1.23</h2>
-                <p>无使用门槛</p>
+                <p class="van-coupon__condition">无使用门槛</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name">name</h2>
+                <p class="van-coupon__name">name</p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
+                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
+                  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+                      <!----></i></div>
+                </div>
               </div>
             </div>
             <p class="van-coupon__description">description</p>
@@ -128,11 +140,15 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount">8.8折</h2>
-                <p>满0.5元可用</p>
+                <p class="van-coupon__condition">满0.5元可用</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name">name</h2>
+                <p class="van-coupon__name">name</p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
+                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
+                  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+                      <!----></i></div>
+                </div>
               </div>
             </div>
           </div>
@@ -140,11 +156,15 @@ exports[`render coupon list 1`] = `
             <div class="van-coupon__content">
               <div class="van-coupon__head">
                 <h2 class="van-coupon__amount">9折</h2>
-                <p>满0.5元可用</p>
+                <p class="van-coupon__condition">满0.5元可用</p>
               </div>
               <div class="van-coupon__body">
-                <h2 class="van-coupon__name">name</h2>
+                <p class="van-coupon__name">name</p>
-                <p>有效期：2017.03.10 - 2017.12.30</p>
+                <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
+                <div role="checkbox" tabindex="0" aria-checked="false" class="van-checkbox van-coupon__corner" size="18">
+                  <div class="van-checkbox__icon van-checkbox__icon--round"><i class="van-icon van-icon-success">
+                      <!----></i></div>
+                </div>
               </div>
             </div>
           </div>
@@ -154,7 +174,7 @@ exports[`render coupon list 1`] = `
         <!---->
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
+  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
 </div>
 `;
 
@@ -163,11 +183,11 @@ exports[`render disabled coupon 1`] = `
   <div class="van-coupon__content">
     <div class="van-coupon__head">
       <h2 class="van-coupon__amount"><span>¥</span> 1.5</h2>
-      <p>无使用门槛</p>
+      <p class="van-coupon__condition">无使用门槛</p>
     </div>
     <div class="van-coupon__body">
-      <h2 class="van-coupon__name">name</h2>
+      <p class="van-coupon__name">name</p>
-      <p>有效期：2017.03.10 - 2017.12.30</p>
+      <p class="van-coupon__valid">2017.03.10 - 2017.12.30</p>
     </div>
   </div>
   <p class="van-coupon__description">reason</p>
@@ -179,15 +199,15 @@ exports[`render empty coupon list 1`] = `
   <div class="van-cell van-cell--borderless van-field van-coupon-list__field">
     <div class="van-cell__value van-cell__value--alone">
       <div class="van-field__body"><input type="text" placeholder="请输入优惠码" class="van-field__control">
-        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--small van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
+        <div class="van-field__button"><button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--plain van-button--disabled van-coupon-list__exchange"><span class="van-button__text">兑换</span></button></div>
       </div>
     </div>
   </div>
   <div class="van-tabs van-tabs--line van-coupon-list__tab">
-    <div class="van-tabs__wrap van-hairline--top-bottom">
+    <div class="van-tabs__wrap">
       <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
-        <div role="tab" class="van-tab"><span class="van-ellipsis">可使用优惠券 (0)</span></div>
+        <div role="tab" class="van-tab"><span class="van-ellipsis">可用 (0)</span></div>
-        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可使用优惠券 (0)</span></div>
+        <div role="tab" class="van-tab van-tab--active" aria-selected="true"><span class="van-ellipsis">不可用 (0)</span></div>
         <div class="van-tabs__line"></div>
       </div>
     </div>
@@ -207,6 +227,6 @@ exports[`render empty coupon list 1`] = `
         </div>
       </div>
     </div>
-  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠</span></button>
+  </div><button class="van-button van-button--default van-button--large van-coupon-list__close"><span class="van-button__text">不使用优惠券</span></button>
 </div>
 `;

src/coupon/index.js

@@ -34,7 +34,7 @@ export default createComponent({
   computed: {
     validPeriod() {
       const { startAt, endAt } = this.coupon;
-      return `${t('valid')}：${getDate(startAt)} - ${getDate(endAt)}`;
+      return `${getDate(startAt)} - ${getDate(endAt)}`;
     },
 
     faceAmount() {
@@ -70,13 +70,13 @@ export default createComponent({
         <div class={bem('content')}>
           <div class={bem('head')}>
             <h2 class={bem('amount')} domPropsInnerHTML={this.faceAmount} />
-            <p>{this.coupon.condition || this.conditionMessage}</p>
+            <p class={bem('condition')}>{this.coupon.condition || this.conditionMessage}</p>
           </div>
           <div class={bem('body')}>
-            <h2 class={bem('name')}>{coupon.name}</h2>
+            <p class={bem('name')}>{coupon.name}</p>
-            <p>{this.validPeriod}</p>
+            <p class={bem('valid')}>{this.validPeriod}</p>
-            {this.chosen && (
+            {!this.disabled && (
-              <Checkbox value={true} class={bem('corner')} checked-color={RED} />
+              <Checkbox value={this.chosen} class={bem('corner')} size={18} checked-color={RED} />
             )}
           </div>
         </div>

src/coupon/index.less

@@ -14,45 +14,36 @@
 
   &__content {
     display: flex;
+    align-items: center;
     box-sizing: border-box;
-    height: @coupon-content-height;
+    min-height: @coupon-content-height;
     padding: @coupon-content-padding;
-  }
+    color: @gray-8;
-
-  p,
-  h2 {
-    margin: 0;
-
-    .ellipsis();
-  }
-
-  h2 {
-    height: 34px;
-    font-weight: @font-weight-bold;
-    line-height: 34px;
-  }
-
-  p {
-    color: @gray-6;
-    font-size: @font-size-sm;
-    line-height: 16px;
   }
 
   &__head {
     position: relative;
     min-width: @coupon-head-width;
-    padding-right: @padding-xs;
+    padding: 0 @padding-xs;
+    color: @coupon-amount-color;
+    text-align: center;
+  }
 
-    p {
+  &__amount,
-      white-space: pre-wrap;
+  &__condition,
-    }
+  &__name,
+  &__valid {
+    .ellipsis();
   }
 
   &__amount {
-    color: @coupon-amount-color;
+    margin-bottom: 6px;
+    font-weight: @font-weight-bold;
     font-size: @coupon-amount-font-size;
+    .ellipsis();
 
     span {
+      font-weight: normal;
       font-size: @coupon-currency-font-size;
 
       &:not(:empty) {
@@ -61,6 +52,12 @@
     }
   }
 
+  &__condition {
+    font-size: @font-size-sm;
+    line-height: 16px;
+    white-space: pre-wrap;
+  }
+
   &__body {
     position: relative;
     flex: 1;
@@ -68,17 +65,26 @@
   }
 
   &__name {
+    margin-bottom: 10px;
+    font-weight: bold;
     font-size: @coupon-name-font-size;
+    line-height: 20px;
+  }
+
+  &__valid {
+    font-size: @font-size-sm;
   }
 
   &__corner {
     position: absolute;
-    top: @padding-md;
+    top: 0;
     right: @padding-md;
+    bottom: 0;
   }
 
   &__description {
     padding: @coupon-description-padding;
+    font-size: @font-size-sm;
     background-color: @coupon-description-background-color;
     border-top: 1px dashed @coupon-description-border-color;
   }
@@ -92,10 +98,8 @@
       height: @coupon-content-height - 10px;
     }
 
-    p,
+    .van-coupon__head {
-    h2,
+      color: inherit;
-    span {
-      color: @coupon-disabled-text-color;
     }
   }
 }

src/datetime-picker/test/__snapshots__/date-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`filter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -61,7 +61,7 @@ exports[`filter prop 1`] = `
 
 exports[`formatter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/datetime-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/demo.spec.js.snap

@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -164,7 +164,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -242,7 +242,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -285,7 +285,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">
@@ -375,7 +375,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker van-datetime-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">
         <div class="van-picker-column">

src/datetime-picker/test/__snapshots__/time-picker.spec.js.snap

@@ -2,7 +2,7 @@
 
 exports[`filter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -33,7 +33,7 @@ exports[`filter prop 1`] = `
 
 exports[`format initial value 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -57,7 +57,7 @@ exports[`format initial value 1`] = `
 
 exports[`formatter prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">
@@ -88,7 +88,7 @@ exports[`formatter prop 1`] = `
 
 exports[`max-hour & max-minute 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker-column">

src/icon/README.md

@@ -22,12 +22,34 @@ Use `name` prop to set icon name or icon URL
 
 ### Show Info
 
+Use `dot` prop, a small red dot will be displayed in the upper right corner of the icon. 
+
+Use `info` prop, the info will be displayed in the upper right corner of the icon.
+
 ```html
 <van-icon name="chat" dot />
 <van-icon name="chat" info="9" />
 <van-icon name="chat" info="99+" />
 ```
 
+### Icon Color
+
+Use `color` prop to set icon color
+
+```html
+<van-icon name="location-o" color="#ff0000" />
+<van-icon name="chat" color="#00ff00" />
+```
+
+### Icon Size
+
+Use `size` prop to set icon size
+
+```html
+<van-icon name="location-o" size="40px" />
+<van-icon name="chat" size="20px" />
+```
+
 ### Use local font file
 
 Icon uses font file in `yzcdn.cn` by default，if you want to use the local font file，please import the following css file.

src/icon/README.zh-CN.md

@@ -34,6 +34,25 @@ Vue.use(Icon);
 <van-icon name="chat" info="99+" />
 ```
 
+
+### 图标颜色
+
+`Icon`的`color`属性用来设置图标的颜色
+
+```html
+<van-icon name="location-o" color="#ff0000" />
+<van-icon name="chat" color="#00ff00" />
+```
+
+### 图标大小
+
+`Icon`的`size`属性用来设置图标的尺寸大小
+
+```html
+<van-icon name="location-o" size="40px" />
+<van-icon name="chat" size="20px" />
+```
+
 ### 使用本地字体文件
 
 Icon 组件默认引用有赞 CDN 提供的字体文件，并通过网络下载。如果需要在项目中使用本地字体文件，请引入下面的 CSS 文件，并在项目中配置`url-loader`

src/icon/demo/index.vue

@@ -21,6 +21,49 @@
           <span>{{ icon }}</span>
         </van-col>
       </van-tab>
+
+      <van-tab :title="$t('demo')">
+        <demo-block :title="$t('dot')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" dot @click="copy(demoIcon, { dot: true })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('message')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" info="123" @click="copy(demoIcon, { info: '123' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('color')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" color="#ff0000" @click="copy(demoIcon, { color: '#ff0000' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+        <demo-block :title="$t('size')">
+          <van-col span="6">
+            <van-icon :name="demoIcon" @click="copy(demoIcon)" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+          <van-col span="6">
+            <van-icon :name="demoIcon" size="40px" @click="copy(demoIcon, { size: '40px' })" />
+            <span>{{ demoIcon }}</span>
+          </van-col>
+        </demo-block>
+      </van-tab>
     </van-tabs>
   </demo-section>
 </template>
@@ -61,7 +104,12 @@ export default {
       basic: '基础图标',
       copied: '复制成功',
       outline: '线框风格',
-      filled: '实底风格'
+      filled: '实底风格',
+      demo: '用法示例',
+      dot: '图标右上角小红点',
+      message: '图标右上角徽标的内容',
+      color: '图标颜色',
+      size: '图标大小'
     },
     'en-US': {
       title: 'Icon List',
@@ -69,7 +117,12 @@ export default {
       basic: 'Basic',
       copied: 'Copied',
       outline: 'Outline',
-      filled: 'Filled'
+      filled: 'Filled',
+      demo: 'Demo',
+      dot: 'Show Red Dot',
+      message: 'Show Info',
+      color: 'Icon Color',
+      size: 'Icon Size'
     }
   },
 
@@ -77,13 +130,27 @@ export default {
     this.BLUE = BLUE;
     this.icons = icons;
     return {
-      tab: 0
+      tab: 0,
+      demoIcon: 'location-o'
     };
   },
 
   methods: {
-    copy(icon) {
+    copy(icon, option = {}) {
-      const tag = `<van-icon name="${icon}" />`;
+      let tag = `<van-icon name="${icon}"`;
+      if ('dot' in option) {
+        tag = `${tag} ${option.dot ? 'dot' : ''}`;
+      }
+      if ('info' in option) {
+        tag = `${tag} info="${option.info}"`;
+      }
+      if ('color' in option) {
+        tag = `${tag} color="${option.color}"`;
+      }
+      if ('size' in option) {
+        tag = `${tag} size="${option.size}"`;
+      }
+      tag = `${tag} />`;
       copyToClipboard(tag);
 
       this.$notify({

src/locale/lang/en-US.ts

@@ -29,7 +29,6 @@ export default {
     label: 'Total：'
   },
   vanCoupon: {
-    valid: 'Valid',
     unlimited: 'Unlimited',
     discount: (discount: number) => `${discount * 10}% off`,
     condition: (condition: number) => `At least ${condition}`

src/locale/lang/es-ES.ts

@@ -29,7 +29,6 @@ export default {
     label: 'Total：'
   },
   vanCoupon: {
-    valid: 'Valido',
     unlimited: 'Ilimitado',
     discount: (discount: number) => `${discount * 10}% de descuento`,
     condition: (condition: number) => `Al menos ${condition}`

src/locale/lang/tr-TR.ts

@@ -29,7 +29,6 @@ export default {
     label: 'Toplam:'
   },
   vanCoupon: {
-    valid: 'Geçerli',
     unlimited: 'Sınırsız',
     discount: (discount: number) => `%${discount * 10} indirim`,
     condition: (condition: number) => `En az ${condition}`

src/locale/lang/zh-CN.ts

@@ -29,7 +29,6 @@ export default {
     label: '合计：'
   },
   vanCoupon: {
-    valid: '有效期',
     unlimited: '无使用门槛',
     discount: (discount: number) => `${discount}折`,
     condition: (condition: number) => `满${condition}元可用`
@@ -42,9 +41,9 @@ export default {
   vanCouponList: {
     empty: '暂无优惠券',
     exchange: '兑换',
-    close: '不使用优惠',
+    close: '不使用优惠券',
-    enable: '可使用优惠券',
+    enable: '可用',
-    disabled: '不可使用优惠券',
+    disabled: '不可用',
     placeholder: '请输入优惠码'
   },
   vanAddressEdit: {

src/locale/lang/zh-HK.ts

@@ -29,7 +29,6 @@ export default {
     label: '合計：'
   },
   vanCoupon: {
-    valid: '有效期',
     unlimited: '無使用門檻',
     discount: (discount: number) => `${discount}折`,
     condition: (condition: number) => `滿${condition}元可用`

src/locale/lang/zh-TW.ts

@@ -29,7 +29,6 @@ export default {
     label: '合計：'
   },
   vanCoupon: {
-    valid: '有效期限',
     unlimited: '無使用門檻',
     discount: (discount: number) => `${discount}折`,
     condition: (condition: number) => `滿${condition}元可用`

src/picker/index.js

@@ -63,7 +63,12 @@ export default createComponent({
 
     onChange(columnIndex) {
       if (this.simple) {
-        this.$emit('change', this, this.getColumnValue(0), this.getColumnIndex(0));
+        this.$emit(
+          'change',
+          this,
+          this.getColumnValue(0),
+          this.getColumnIndex(0)
+        );
       } else {
         this.$emit('change', this, this.getValues(), columnIndex);
       }
@@ -105,7 +110,10 @@ export default createComponent({
     // set options of column by index
     setColumnValues(index, options) {
       const column = this.children[index];
-      if (column && JSON.stringify(column.options) !== JSON.stringify(options)) {
+      if (
+        column &&
+        JSON.stringify(column.options) !== JSON.stringify(options)
+      ) {
         column.options = options;
         column.setIndex(0);
       }
@@ -142,13 +150,70 @@ export default createComponent({
 
     onCancel() {
       this.emit('cancel');
+    },
+
+    genTitle() {
+      const titleSlot = this.slots('title');
+
+      if (titleSlot) {
+        return titleSlot;
+      }
+
+      if (this.title) {
+        return <div class={['van-ellipsis', bem('title')]}>{this.title}</div>;
+      }
+    },
+
+    genToolbar() {
+      if (this.showToolbar) {
+        return (
+          <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
+            {this.slots() || [
+              <button
+                type="button"
+                class={bem('cancel')}
+                onClick={this.onCancel}
+              >
+                {this.cancelButtonText || t('cancel')}
+              </button>,
+              this.genTitle(),
+              <button
+                type="button"
+                class={bem('confirm')}
+                onClick={this.onConfirm}
+              >
+                {this.confirmButtonText || t('confirm')}
+              </button>
+            ]}
+          </div>
+        );
+      }
+    },
+
+    genColumns() {
+      const columns = this.simple ? [this.columns] : this.columns;
+
+      return columns.map((item, index) => (
+        <PickerColumn
+          valueKey={this.valueKey}
+          allowHtml={this.allowHtml}
+          className={item.className}
+          itemHeight={this.itemHeight}
+          defaultIndex={item.defaultIndex || this.defaultIndex}
+          swipeDuration={this.swipeDuration}
+          visibleItemCount={this.visibleItemCount}
+          initialOptions={this.simple ? item : item.values}
+          onChange={() => {
+            this.onChange(index);
+          }}
+        />
+      ));
     }
   },
 
   render(h) {
     const { itemHeight } = this;
     const wrapHeight = itemHeight * this.visibleItemCount;
-    const columns = this.simple ? [this.columns] : this.columns;
 
     const frameStyle = {
       height: `${itemHeight}px`
@@ -162,49 +227,25 @@ export default createComponent({
       backgroundSize: `100% ${(wrapHeight - itemHeight) / 2}px`
     };
 
-    const Toolbar = this.showToolbar && (
-      <div class={[BORDER_TOP_BOTTOM, bem('toolbar')]}>
-        {this.slots() || [
-          <button class={bem('cancel')} onClick={this.onCancel}>
-            {this.cancelButtonText || t('cancel')}
-          </button>,
-          this.slots('title') ||
-            (this.title && (
-              <div class={['van-ellipsis', bem('title')]}>{this.title}</div>
-            )),
-          <button class={bem('confirm')} onClick={this.onConfirm}>
-            {this.confirmButtonText || t('confirm')}
-          </button>
-        ]}
-      </div>
-    );
-
     return (
       <div class={bem()}>
-        {this.toolbarPosition === 'top' ? Toolbar : h()}
+        {this.toolbarPosition === 'top' ? this.genToolbar() : h()}
         {this.loading ? <Loading class={bem('loading')} /> : h()}
         {this.slots('columns-top')}
-        <div class={bem('columns')} style={columnsStyle} onTouchmove={preventDefault}>
+        <div
-          {columns.map((item, index) => (
+          class={bem('columns')}
-            <PickerColumn
+          style={columnsStyle}
-              valueKey={this.valueKey}
+          onTouchmove={preventDefault}
-              allowHtml={this.allowHtml}
+        >
-              className={item.className}
+          {this.genColumns()}
-              itemHeight={this.itemHeight}
-              defaultIndex={item.defaultIndex || this.defaultIndex}
-              swipeDuration={this.swipeDuration}
-              visibleItemCount={this.visibleItemCount}
-              initialOptions={this.simple ? item : item.values}
-              onChange={() => {
-                this.onChange(index);
-              }}
-            />
-          ))}
           <div class={bem('mask')} style={maskStyle} />
-          <div class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]} style={frameStyle} />
+          <div
+            class={[BORDER_UNSET_TOP_BOTTOM, bem('frame')]}
+            style={frameStyle}
+          />
         </div>
         {this.slots('columns-bottom')}
-        {this.toolbarPosition === 'bottom' ? Toolbar : h()}
+        {this.toolbarPosition === 'bottom' ? this.genToolbar() : h()}
       </div>
     );
   }

src/picker/test/__snapshots__/demo.spec.js.snap

@@ -42,8 +42,8 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-picker">
-      <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>
+      <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>
-        <div class="van-ellipsis van-picker__title">标题</div><button class="van-picker__confirm">确认</button>
+        <div class="van-ellipsis van-picker__title">标题</div><button type="button" class="van-picker__confirm">确认</button>
       </div>
       <!---->
       <div class="van-picker__columns" style="height: 220px;">

src/picker/test/__snapshots__/index.spec.js.snap

@@ -30,7 +30,7 @@ exports[`column watch default index 2`] = `
 
 exports[`columns-top、columns-bottom prop 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
   <!---->Custom Columns Top<div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
@@ -57,7 +57,7 @@ exports[`not allow html 1`] = `
 
 exports[`render title slot 1`] = `
 <div class="van-picker">
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button>Custom title<button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button>Custom title<button type="button" class="van-picker__confirm">确认</button></div>
   <!---->
   <div class="van-picker__columns" style="height: 220px;">
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
@@ -75,6 +75,6 @@ exports[`toolbar-position prop 1`] = `
     <div class="van-picker__mask" style="background-size: 100% 88px;"></div>
     <div class="van-hairline-unset--top-bottom van-picker__frame" style="height: 44px;"></div>
   </div>
-  <div class="van-hairline--top-bottom van-picker__toolbar"><button class="van-picker__cancel">取消</button><button class="van-picker__confirm">确认</button></div>
+  <div class="van-hairline--top-bottom van-picker__toolbar"><button type="button" class="van-picker__cancel">取消</button><button type="button" class="van-picker__confirm">确认</button></div>
 </div>
 `;

src/sidebar/README.md

@@ -52,6 +52,31 @@ export default {
 </van-sidebar>
 ```
 
+### Change Event
+
+```html
+<van-sidebar v-model="activeKey" @change="onChange">
+  <van-sidebar-item title="Title1" />
+  <van-sidebar-item title="Title2" />
+  <van-sidebar-item title="Title3" />
+</van-sidebar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ## API
 
 ### Sidebar Props

src/sidebar/README.zh-CN.md

@@ -58,6 +58,34 @@ export default {
 </van-sidebar>
 ```
 
+
+### Change 事件
+
+设置`change`方法来监听切换导航项时的事件
+
+```html
+<van-sidebar v-model="activeKey" @change="onChange">
+  <van-sidebar-item title="标签名1" />
+  <van-sidebar-item title="标签名2" />
+  <van-sidebar-item title="标签名3" />
+</van-sidebar>
+```
+
+```js
+export default {
+  data() {
+    return {
+      activeKey: 0
+    };
+  },
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ## API
 
 ### Sidebar Props

src/sidebar/demo/index.vue

@@ -27,6 +27,15 @@
           <van-sidebar-item :title="$t('title')" />
         </van-sidebar>
       </van-grid-item>
+
+      <van-grid-item>
+        <h3 class="demo-sidebar-title">{{ $t('eventChange') }}</h3>
+        <van-sidebar v-model="activeKey4" @change="onChange">
+          <van-sidebar-item :title="$t('title') + 1" />
+          <van-sidebar-item :title="$t('title') + 2" />
+          <van-sidebar-item :title="$t('title') + 3" />
+        </van-sidebar>
+      </van-grid-item>
     </van-grid>
   </demo-section>
 </template>
@@ -37,11 +46,15 @@ export default {
     'zh-CN': {
       title: '标签名',
       showInfo: '提示信息',
-      disabled: '禁用选项'
+      disabled: '禁用选项',
+      eventChange: '切换事件',
+      selectTip: '你切换到了'
     },
     'en-US': {
       showInfo: 'Show Info',
-      disabled: 'Disabled'
+      disabled: 'Disabled',
+      eventChange: 'Change Event',
+      selectTip: 'You select '
     }
   },
 
@@ -49,8 +62,18 @@ export default {
     return {
       activeKey1: 0,
       activeKey2: 0,
-      activeKey3: 0
+      activeKey3: 0,
+      activeKey4: 0
     };
+  },
+
+  methods: {
+    onChange(index) {
+      this.$notify({
+        type: 'primary',
+        message: `${this.$t('selectTip')} ${this.$t('title')}${index + 1}`
+      });
+    }
   }
 };
 </script>

src/sidebar/test/__snapshots__/demo.spec.js.snap

@@ -54,6 +54,24 @@ exports[`renders demo correctly 1`] = `
           </a></div>
       </div>
     </div>
+    <div class="van-grid-item" style="flex-basis: 50%;">
+      <div class="van-grid-item__content van-grid-item__content--center">
+        <h3 class="demo-sidebar-title">切换事件</h3>
+        <div class="van-sidebar"><a class="van-sidebar-item van-sidebar-item--select">
+            <div class="van-sidebar-item__text">标签名1
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名2
+              <!---->
+            </div>
+          </a> <a class="van-sidebar-item">
+            <div class="van-sidebar-item__text">标签名3
+              <!---->
+            </div>
+          </a></div>
+      </div>
+    </div>
   </div>
 </div>
 `;

src/stepper/README.md

@@ -107,7 +107,9 @@ export default {
 | name | Stepper name | *string \| number* | - | 2.0.3 |
 | integer | Whether to allow only integers | *boolean* | `false` | - |
 | disabled | Disable value change | *boolean* | `false` | - |
-| disable-input | Disable input | *boolean* | `false` | - |
+| disable-plus | Whether to disable plus button | *boolean* | `false` | 2.2.16 |
+| disable-minus | Whether to disable minus button | *boolean* | `false` | 2.2.16 |
+| disable-input | Whether to disable input | *boolean* | `false` | - |
 | async-change | Whether to enable async change | *boolean* | `false` | - | - |
 | input-width | Input width | *string \| number* | `32px` | - |
 | button-size | Button size | *string \| number* | `28px` | 2.0.5 |

src/stepper/README.zh-CN.md

@@ -129,6 +129,8 @@ export default {
 | name | 标识符，可以在`change`事件回调参数中获取 | *string \| number* | - | 2.2.11 |
 | integer | 是否只允许输入整数 | *boolean* | `false` | - |
 | disabled | 是否禁用步进器 | *boolean* | `false` | - |
+| disable-plus | 是否禁用增加按钮 | *boolean* | `false` | 2.2.16 |
+| disable-minus | 是否禁用减少按钮 | *boolean* | `false` | 2.2.16 |
 | disable-input | 是否禁用输入框 | *boolean* | `false` | - |
 | async-change | 是否开启异步变更，开启后需要手动控制输入值 | *boolean* | `false` | - |
 | input-width | 输入框宽度，默认单位为`px` | *string \| number* | `32px` | - |

src/stepper/index.js

@@ -25,6 +25,8 @@ export default createComponent({
     inputWidth: [Number, String],
     buttonSize: [Number, String],
     asyncChange: Boolean,
+    disablePlus: Boolean,
+    disableMinus: Boolean,
     disableInput: Boolean,
     decimalLength: Number,
     name: {
@@ -72,11 +74,11 @@ export default createComponent({
 
   computed: {
     minusDisabled() {
-      return this.disabled || this.currentValue <= this.min;
+      return this.disabled || this.disableMinus || this.currentValue <= this.min;
     },
 
     plusDisabled() {
-      return this.disabled || this.currentValue >= this.max;
+      return this.disabled || this.disablePlus || this.currentValue >= this.max;
     },
 
     inputStyle() {
@@ -253,6 +255,7 @@ export default createComponent({
       <div class={bem()}>
         <button
           vShow={this.showMinus}
+          type="button"
           style={this.buttonStyle}
           class={bem('minus', { disabled: this.minusDisabled })}
           {...createListeners('minus')}
@@ -273,6 +276,7 @@ export default createComponent({
         />
         <button
           vShow={this.showPlus}
+          type="button"
           style={this.buttonStyle}
           class={bem('plus', { disabled: this.plusDisabled })}
           {...createListeners('plus')}

src/stepper/test/__snapshots__/demo.spec.js.snap

@@ -5,49 +5,49 @@ exports[`renders demo correctly 1`] = `
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>基础用法</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>步长设置</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>限制输入范围</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="8" aria-valuemin="5" aria-valuenow="5" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>限制输入整数</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>禁用状态</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus van-stepper__plus--disabled"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>固定小数位数</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1.0" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>自定义大小</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="width: 32px; height: 32px;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 40px; height: 32px;"><button type="button" class="van-stepper__plus" style="width: 32px; height: 32px;"></button></div>
     </div>
   </div>
   <div class="van-cell van-cell--center">
     <div class="van-cell__title"><span>异步变更</span></div>
     <div class="van-cell__value">
-      <div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus"></button></div>
+      <div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus"></button></div>
     </div>
   </div>
 </div>

src/stepper/test/__snapshots__/index.spec.js.snap

@@ -1,9 +1,9 @@
 // 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" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button class="van-stepper__plus"></button></div>`;
+exports[`disable stepper input 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="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" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" 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 type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" disabled="disabled" class="van-stepper__input"><button type="button" class="van-stepper__plus van-stepper__plus--disabled"></button></div>`;
 
-exports[`input-width prop 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button class="van-stepper__plus"></button></div>`;
+exports[`input-width prop 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input" style="width: 10rem;"><button type="button" class="van-stepper__plus"></button></div>`;
 
-exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button class="van-stepper__plus" style="display: none;"></button></div>`;
+exports[`show-plus & show-minus props 1`] = `<div class="van-stepper"><button type="button" class="van-stepper__minus van-stepper__minus--disabled" style="display: none;"></button><input type="number" role="spinbutton" aria-valuemax="Infinity" aria-valuemin="1" aria-valuenow="1" class="van-stepper__input"><button type="button" class="van-stepper__plus" style="display: none;"></button></div>`;

src/stepper/test/index.spec.js

@@ -19,6 +19,35 @@ test('disable stepper input', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('disable button', async () => {
+  const wrapper = mount(Stepper, {
+    propsData: {
+      value: 5
+    }
+  });
+
+  const plus = wrapper.find('.van-stepper__plus');
+  const minus = wrapper.find('.van-stepper__minus');
+
+  minus.trigger('click');
+
+  expect(wrapper.emitted('overlimit')).toBeFalsy();
+  expect(wrapper.emitted('minus')).toBeTruthy();
+  expect(wrapper.emitted('change')[0]).toEqual([4, { name: '' }]);
+
+  wrapper.setProps({
+    disablePlus: true,
+    disableMinus: true
+  });
+
+  await later();
+
+  minus.trigger('click');
+  expect(wrapper.emitted('overlimit')[0][0]).toBe('minus');
+  plus.trigger('click');
+  expect(wrapper.emitted('overlimit')[1][0]).toBe('plus');
+});
+
 test('click button', () => {
   const wrapper = mount(Stepper, {
     propsData: {

src/style/var.less

@@ -231,20 +231,20 @@
 
 // Coupon
 @coupon-margin: 0 @padding-md @padding-md;
-@coupon-content-height: 100px;
+@coupon-content-height: 84px;
-@coupon-content-padding: @padding-lg 0 0 @padding-md;
+@coupon-content-padding: 14px 0;
 @coupon-background-color: @white;
 @coupon-active-background-color: @active-color;
 @coupon-border-radius: @border-radius-md;
 @coupon-box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
-@coupon-head-width: 85px;
+@coupon-head-width: 96px;
 @coupon-amount-color: @red;
-@coupon-amount-font-size: 24px;
+@coupon-amount-font-size: 30px;
-@coupon-currency-font-size: 50%;
+@coupon-currency-font-size: 40%;
-@coupon-name-font-size: @font-size-lg;
+@coupon-name-font-size: @font-size-md;
 @coupon-disabled-text-color: @gray-6;
 @coupon-description-padding: @padding-xs @padding-md;
-@coupon-description-background-color: @background-color-light;
+@coupon-description-background-color: @white;
 @coupon-description-border-color: @border-color;
 
 // CouponCell
@@ -252,7 +252,7 @@
 
 // CouponList
 @coupon-list-background-color: @background-color;
-@coupon-list-field-padding: @padding-xs @padding-md;
+@coupon-list-field-padding: 5px 0 5px @padding-md;
 @coupon-list-exchange-button-height: 32px;
 @coupon-list-empty-image-size: 200px;
 @coupon-list-empty-tip-color: @gray-6;

src/swipe/README.zh-CN.md

@@ -181,3 +181,11 @@ export default {
 |------|------|------|
 | default | 轮播内容 | - |
 | indicator | 自定义指示器 | - |
+
+## 常见问题
+
+### 滑动轮播时为什么触发了 click 事件？
+
+这种情况通常是由于项目中引入了`fastclick`库导致的。`fastclick`的原理是通过 Touch 事件模拟出 click 事件，而 Swipe 内部默认会阻止 touchmove 事件冒泡，干扰了 fastclick 的判断，导致出现这个问题。
+
+将 Swipe 组件的 stop-propagation 属性设置为 false 即可避免该问题。

src/tabbar/README.md

@@ -112,6 +112,31 @@ export default {
 </van-tabbar>
 ```
 
+
+### Change Event
+
+```html
+<van-tabbar 
+  v-model="active" 
+  @change="onChange"
+>
+  <van-tabbar-item icon="home-o">Tab1</van-tabbar-item>
+  <van-tabbar-item icon="search">Tab2</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o">Tab3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">Tab4</van-tabbar-item>
+</van-tabbar>
+```
+
+```js
+export default {
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ### Route Mode
 
 ```html

src/tabbar/README.zh-CN.md

@@ -118,6 +118,30 @@ export default {
 </van-tabbar>
 ```
 
+### Change 事件
+
+```html
+<van-tabbar 
+  v-model="active" 
+  @change="onChange"
+>
+  <van-tabbar-item icon="home-o">标签1</van-tabbar-item>
+  <van-tabbar-item icon="search">标签2</van-tabbar-item>
+  <van-tabbar-item icon="freinds-o">标签3</van-tabbar-item>
+  <van-tabbar-item icon="setting-o">标签4</van-tabbar-item>
+</van-tabbar>
+```
+
+```js
+export default {
+  methods: {
+    onChange(index) {
+      Notify({ type: 'primary', message: index });
+    }
+  }
+}
+```
+
 ### 路由模式
 
 标签栏支持路由模式，用于搭配`vue-router`使用。路由模式下会匹配页面路径和标签的`to`属性，并自动选中对应的标签

src/tabbar/demo/index.vue

@@ -48,6 +48,15 @@
         <van-tabbar-item icon="setting-o">{{ $t('tab') }}</van-tabbar-item>
       </van-tabbar>
     </demo-block>
+
+    <demo-block :title="$t('switchEvent')">
+      <van-tabbar v-model="active5" @change="onChange">
+        <van-tabbar-item icon="home-o">{{ $t('tab') + 1 }}</van-tabbar-item>
+        <van-tabbar-item icon="search">{{ $t('tab') + 2 }}</van-tabbar-item>
+        <van-tabbar-item icon="friends-o">{{ $t('tab') + 3 }}</van-tabbar-item>
+        <van-tabbar-item icon="setting-o">{{ $t('tab') + 4 }}</van-tabbar-item>
+      </van-tabbar>
+    </demo-block>
   </demo-section>
 </template>
 
@@ -58,13 +67,17 @@ export default {
       badge: '提示信息',
       customIcon: '自定义图标',
       customColor: '自定义颜色',
-      matchByName: '通过名称匹配'
+      matchByName: '通过名称匹配',
+      switchEvent: '切换标签事件',
+      selectTip: '你切换到了'
     },
     'en-US': {
       badge: 'Show Badge',
       customIcon: 'Custom Icon',
       customColor: 'Custom Color',
-      matchByName: 'Match by name'
+      matchByName: 'Match by name',
+      switchEvent: 'Change Event',
+      selectTip: 'You select '
     }
   },
 
@@ -74,12 +87,22 @@ export default {
       active2: 0,
       active3: 0,
       active4: 0,
+      active5: 0,
       activeName: 'home',
       icon: {
         active: 'https://img.yzcdn.cn/vant/user-active.png',
         inactive: 'https://img.yzcdn.cn/vant/user-inactive.png'
       }
     };
+  },
+
+  methods: {
+    onChange(index) {
+      this.$notify({
+        type: 'primary',
+        message: `${this.$t('selectTip')} ${this.$t('tab')}${index + 1}`
+      });
+    }
   }
 };
 </script>

src/tabbar/test/__snapshots__/demo.spec.js.snap

@@ -154,5 +154,37 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index: 1;">
+      <div class="van-tabbar-item van-tabbar-item--active">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-home-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签1</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-search">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签2</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-friends-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签3</div>
+      </div>
+      <div class="van-tabbar-item">
+        <div class="van-tabbar-item__icon"><i class="van-icon van-icon-setting-o">
+            <!----></i>
+          <!---->
+        </div>
+        <div class="van-tabbar-item__text">标签4</div>
+      </div>
+    </div>
+  </div>
 </div>
 `;

src/uploader/index.js

@@ -144,12 +144,13 @@ export default createComponent({
     },
 
     onAfterRead(files, oversize) {
+      this.resetInput();
+
       if (oversize) {
         this.$emit('oversize', files, this.getDetail());
         return;
       }
 
-      this.resetInput();
       this.$emit('input', [...this.fileList, ...toArray(files)]);
 
       if (this.afterRead) {