From f6f696ff7353ae88be94ecb2fdb35a8d85221fe3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Tue, 10 Sep 2019 17:08:43 +0800
Subject: [PATCH] chore: use preventDefault util (#4412)

---
 src/button/README.md                          |  12 +-
 src/button/README.zh-CN.md                    |  12 +-
 src/button/demo/index.vue                     | 131 +++---------------
 .../test/__snapshots__/demo.spec.js.snap      |  20 +--
 src/index-bar/demo/index.vue                  |   5 +-
 src/index-bar/index.js                        |   6 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 src/number-keyboard/demo/index.vue            |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 src/stepper/index.js                          |  14 +-
 10 files changed, 57 insertions(+), 151 deletions(-)

diff --git a/src/button/README.md b/src/button/README.md
index 85be36de4..9e4a97523 100644
--- a/src/button/README.md
+++ b/src/button/README.md
@@ -25,21 +25,21 @@ Vue.use(Button);
 
 ```html
 <van-button plain type="primary">Primary</van-button>
-<van-button plain type="danger">Danger</van-button>
+<van-button plain type="info">Danger</van-button>
 ```
 
 ### Hairline
 
 ```html
 <van-button plain hairline type="primary">Hairline</van-button>
-<van-button plain hairline type="danger">Hairline</van-button>
+<van-button plain hairline type="info">Hairline</van-button>
 ```
 
 ### Disabled
 
 ```html
 <van-button disabled type="primary">Diabled</van-button>
-<van-button disabled type="danger">Diabled</van-button>
+<van-button disabled type="info">Diabled</van-button>
 ```
 
 ### Loading
@@ -47,14 +47,14 @@ Vue.use(Button);
 ```html 
 <van-button loading type="primary" />
 <van-button loading type="primary" loading-type="spinner" />
-<van-button loading type="danger" loading-text="Loading..." />
+<van-button loading type="info" loading-text="Loading..." />
 ```
 
 ### Shape
 
 ```html 
 <van-button square type="primary">Square</van-button>
-<van-button round type="danger">Round</van-button>
+<van-button round type="info">Round</van-button>
 ```
 
 ### Icon
@@ -62,7 +62,7 @@ Vue.use(Button);
 ```html 
 <van-button icon="star-o" type="primary" />
 <van-button icon="star-o" type="primary">Button</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">Button</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">Button</van-button>
 ```
 
 ### Size
diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md
index c20611762..905216b36 100644
--- a/src/button/README.zh-CN.md
+++ b/src/button/README.zh-CN.md
@@ -29,7 +29,7 @@ Vue.use(Button);
 
 ```html
 <van-button plain type="primary">朴素按钮</van-button>
-<van-button plain type="danger">朴素按钮</van-button>
+<van-button plain type="info">朴素按钮</van-button>
 ```
 
 ### 细边框
@@ -38,7 +38,7 @@ Vue.use(Button);
 
 ```html
 <van-button plain hairline type="primary">细边框按钮</van-button>
-<van-button plain hairline type="danger">细边框按钮</van-button>
+<van-button plain hairline type="info">细边框按钮</van-button>
 ```
 
 ### 禁用状态
@@ -47,7 +47,7 @@ Vue.use(Button);
 
 ```html
 <van-button disabled type="primary">禁用状态</van-button>
-<van-button disabled type="danger">禁用状态</van-button>
+<van-button disabled type="info">禁用状态</van-button>
 ```
 
 ### 加载状态
@@ -57,7 +57,7 @@ Vue.use(Button);
 ```html 
 <van-button loading type="primary" />
 <van-button loading type="primary" loading-type="spinner" />
-<van-button loading type="danger" loading-text="加载中..." />
+<van-button loading type="info" loading-text="加载中..." />
 ```
 
 ### 按钮形状
@@ -66,7 +66,7 @@ Vue.use(Button);
 
 ```html 
 <van-button square type="primary">方形按钮</van-button>
-<van-button round type="danger">圆形按钮</van-button>
+<van-button round type="info">圆形按钮</van-button>
 ```
 
 ### 图标按钮
@@ -76,7 +76,7 @@ Vue.use(Button);
 ```html 
 <van-button icon="star-o" type="primary" />
 <van-button icon="star-o" type="primary">按钮</van-button>
-<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="danger">按钮</van-button>
+<van-button icon="https://img.yzcdn.cn/vant/logo.png" type="info">按钮</van-button>
 ```
 
 ### 按钮尺寸
diff --git a/src/button/demo/index.vue b/src/button/demo/index.vue
index 2aac44bd1..e6ef41a50 100644
--- a/src/button/demo/index.vue
+++ b/src/button/demo/index.vue
@@ -11,86 +11,34 @@
     </demo-block>
 
     <demo-block :title="$t('plain')">
-      <van-button
-        plain
-        type="primary"
-        :text="$t('plain')"
-      />
-      <van-button
-        plain
-        type="danger"
-        :text="$t('plain')"
-      />
+      <van-button plain type="primary" :text="$t('plain')" />
+      <van-button plain type="info" :text="$t('plain')" />
     </demo-block>
 
     <demo-block :title="$t('hairline')">
-      <van-button
-        plain
-        hairline
-        type="primary"
-        :text="$t('hairlineButton')"
-      />
-      <van-button
-        plain
-        hairline
-        type="danger"
-        :text="$t('hairlineButton')"
-      />
+      <van-button plain hairline type="primary" :text="$t('hairlineButton')" />
+      <van-button plain hairline type="info" :text="$t('hairlineButton')" />
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-button
-        disabled
-        type="primary"
-        :text="$t('disabled')"
-      />
-      <van-button
-        disabled
-        type="danger"
-        :text="$t('disabled')"
-      />
+      <van-button disabled type="primary" :text="$t('disabled')" />
+      <van-button disabled type="info" :text="$t('disabled')" />
     </demo-block>
 
     <demo-block :title="$t('loadingStatus')">
-      <van-button
-        loading
-        type="primary"
-      />
-      <van-button
-        loading
-        type="primary"
-        loading-type="spinner"
-      />
-      <van-button
-        loading
-        :loading-text="$t('loadingText')"
-        type="danger"
-      />
+      <van-button loading type="primary" />
+      <van-button loading type="primary" loading-type="spinner" />
+      <van-button loading :loading-text="$t('loadingText')" type="info" />
     </demo-block>
 
     <demo-block :title="$t('shape')">
-      <van-button
-        type="primary"
-        square
-        :text="$t('square')"
-      />
-      <van-button
-        type="danger"
-        round
-        :text="$t('round')"
-      />
+      <van-button type="primary" square :text="$t('square')" />
+      <van-button type="info" round :text="$t('round')" />
     </demo-block>
 
     <demo-block :title="$t('icon')">
-      <van-button
-        type="primary"
-        icon="star-o"
-      />
-      <van-button
-        type="primary"
-        icon="star-o"
-        :text="$t('button')"
-      />
+      <van-button type="primary" icon="star-o" />
+      <van-button type="primary" icon="star-o" :text="$t('button')" />
       <van-button
         plain
         type="primary"
@@ -100,55 +48,20 @@
     </demo-block>
 
     <demo-block :title="$t('size')">
-      <van-button
-        type="primary"
-        size="large"
-      >
-        {{ $t('large') }}
-      </van-button>
-      <van-button
-        type="primary"
-        size="normal"
-      >
-        {{ $t('normal') }}
-      </van-button>
-      <van-button
-        type="primary"
-        size="small"
-      >
-        {{ $t('small') }}
-      </van-button>
-      <van-button
-        type="primary"
-        size="mini"
-      >
-        {{ $t('mini') }}
-      </van-button>
+      <van-button type="primary" size="large">{{ $t('large') }}</van-button>
+      <van-button type="primary" size="normal">{{ $t('normal') }}</van-button>
+      <van-button type="primary" size="small">{{ $t('small') }}</van-button>
+      <van-button type="primary" size="mini">{{ $t('mini') }}</van-button>
     </demo-block>
 
     <demo-block :title="$t('router')">
-      <van-button
-        :text="$t('urlRoute')"
-        type="primary"
-        url="/vant/mobile.html"
-      />
-      <van-button
-        :text="$t('vueRoute')"
-        type="primary"
-        to="index"
-      />
+      <van-button :text="$t('urlRoute')" type="primary" url="/vant/mobile.html" />
+      <van-button :text="$t('vueRoute')" type="primary" to="index" />
     </demo-block>
 
     <demo-block :title="$t('customColor')">
-      <van-button
-        color="#7232dd"
-        :text="$t('customColor')"
-      />
-      <van-button
-        plain
-        color="#7232dd"
-        :text="$t('customColor')"
-      />
+      <van-button color="#7232dd" :text="$t('customColor')" />
+      <van-button plain color="#7232dd" :text="$t('customColor')" />
     </demo-block>
   </demo-section>
 </template>
@@ -213,7 +126,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-button {
   .van-button {
diff --git a/src/button/test/__snapshots__/demo.spec.js.snap b/src/button/test/__snapshots__/demo.spec.js.snap
index f2f35cbee..7f9823299 100644
--- a/src/button/test/__snapshots__/demo.spec.js.snap
+++ b/src/button/test/__snapshots__/demo.spec.js.snap
@@ -5,32 +5,24 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="demo-button-row"><button class="van-button van-button--default van-button--normal"><span class="van-button__text">默认按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">主要按钮</span></button> <button class="van-button van-button--info van-button--normal"><span class="van-button__text">信息按钮</span></button></div> <button class="van-button van-button--danger van-button--normal"><span class="van-button__text">危险按钮</span></button> <button class="van-button van-button--warning van-button--normal"><span class="van-button__text">警告按钮</span></button>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
-  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--danger van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain"><span class="van-button__text">朴素按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--plain van-button--hairline van-hairline--surround"><span class="van-button__text">细边框按钮</span></button></div>
+  <div><button disabled="disabled" class="van-button van-button--primary van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button> <button disabled="disabled" class="van-button van-button--info van-button--normal van-button--disabled"><span class="van-button__text">禁用状态</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal">
       <div class="van-loading van-loading--circular van-button__loading"><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-button van-button--primary van-button--normal">
       <div class="van-loading van-loading--spinner van-button__loading"><span class="van-loading__spinner van-loading__spinner--spinner" style="width: 20px; height: 20px;"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></span></div>
-    </button> <button class="van-button van-button--danger van-button--normal">
+    </button> <button class="van-button van-button--info van-button--normal">
       <div class="van-loading van-loading--circular van-button__loading"><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><span class="van-button__text">加载中...</span>
     </button></div>
-  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--danger van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
+  <div><button class="van-button van-button--primary van-button--normal van-button--square"><span class="van-button__text">方形按钮</span></button> <button class="van-button van-button--info van-button--normal van-button--round"><span class="van-button__text">圆形按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
         <!----></i></button> <button class="van-button van-button--primary van-button--normal"><i class="van-icon van-icon-star-o van-button__icon">
         <!----></i><span class="van-button__text">按钮</span></button> <button class="van-button van-button--primary van-button--normal van-button--plain"><i class="van-icon van-button__icon">
         <div class="van-image van-icon__image"><img src="https://img.yzcdn.cn/vant/logo.png" class="van-image__img" style="object-fit: contain;"></div>
         <!---->
       </i><span class="van-button__text">按钮</span></button></div>
-  <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">
-      大号按钮
-    </span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
-      普通按钮
-    </span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">
-      小型按钮
-    </span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">
-      迷你按钮
-    </span></button></div>
+  <div><button class="van-button van-button--primary van-button--large"><span class="van-button__text">大号按钮</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">普通按钮</span></button> <button class="van-button van-button--primary van-button--small"><span class="van-button__text">小型按钮</span></button> <button class="van-button van-button--primary van-button--mini"><span class="van-button__text">迷你按钮</span></button></div>
   <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">URL 跳转</span></button> <button class="van-button van-button--primary van-button--normal"><span class="van-button__text">路由跳转</span></button></div>
   <div><button class="van-button van-button--default van-button--normal" style="color: rgb(255, 255, 255); background: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button> <button class="van-button van-button--default van-button--normal van-button--plain" style="color: rgb(114, 50, 221); border-color: #7232dd;"><span class="van-button__text">自定义颜色</span></button></div>
 </div>
diff --git a/src/index-bar/demo/index.vue b/src/index-bar/demo/index.vue
index 5862b6024..cd1bb1b96 100644
--- a/src/index-bar/demo/index.vue
+++ b/src/index-bar/demo/index.vue
@@ -1,6 +1,6 @@
 <template>
   <demo-section>
-    <van-tabs v-model="activeTab">
+    <van-tabs v-model="activeTab" :color="BLUE">
       <van-tab :title="$t('basicUsage')">
         <van-index-bar>
           <div
@@ -35,6 +35,8 @@
 </template>
 
 <script>
+import { BLUE } from '../../utils/constant';
+
 export default {
   i18n: {
     'zh-CN': {
@@ -55,6 +57,7 @@ export default {
     }
 
     return {
+      BLUE,
       activeTab: 0,
       indexList,
       customIndexList: [1, 2, 3, 4, 5, 6, 8, 9, 10]
diff --git a/src/index-bar/index.js b/src/index-bar/index.js
index 60e5e8e8d..2ad3b8f71 100644
--- a/src/index-bar/index.js
+++ b/src/index-bar/index.js
@@ -3,6 +3,7 @@ import { TouchMixin } from '../mixins/touch';
 import { ParentMixin } from '../mixins/relation';
 import { BindEventMixin } from '../mixins/bind-event';
 import { GREEN } from '../utils/constant';
+import { preventDefault } from '../utils/dom/event';
 import {
   getScrollTop,
   getElementTop,
@@ -168,10 +169,7 @@ export default createComponent({
       this.touchMove(event);
 
       if (this.direction === 'vertical') {
-        /* istanbul ignore else */
-        if (event.cancelable) {
-          event.preventDefault();
-        }
+        preventDefault(event);
 
         const { clientX, clientY } = event.touches[0];
         const target = document.elementFromPoint(clientX, clientY);
diff --git a/src/index-bar/test/__snapshots__/demo.spec.js.snap b/src/index-bar/test/__snapshots__/demo.spec.js.snap
index 5f19d843e..cc9e1bd60 100644
--- a/src/index-bar/test/__snapshots__/demo.spec.js.snap
+++ b/src/index-bar/test/__snapshots__/demo.spec.js.snap
@@ -4,10 +4,10 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-tabs van-tabs--line">
     <div class="van-tabs__wrap van-hairline--top-bottom">
-      <div role="tablist" class="van-tabs__nav van-tabs__nav--line">
+      <div role="tablist" class="van-tabs__nav van-tabs__nav--line" style="border-color: #1989fa;">
         <div role="tab" aria-selected="true" class="van-tab van-tab--active"><span class="van-ellipsis">基础用法</span></div>
         <div role="tab" class="van-tab"><span class="van-ellipsis">自定义索引列表</span></div>
-        <div class="van-tabs__line" style="width: 0px; transform: translateX(0px) translateX(-50%);"></div>
+        <div class="van-tabs__line" style="background-color: rgb(25, 137, 250); width: 0px; transform: translateX(0px) translateX(-50%);"></div>
       </div>
     </div>
     <div class="van-tabs__content">
diff --git a/src/number-keyboard/demo/index.vue b/src/number-keyboard/demo/index.vue
index 0dca08a6a..e61700961 100644
--- a/src/number-keyboard/demo/index.vue
+++ b/src/number-keyboard/demo/index.vue
@@ -21,7 +21,7 @@
 
     <demo-block :title="$t('custom')">
       <van-button
-        type="primary"
+        type="info"
         @touchstart.stop="keyboard = 'custom'"
       >
         {{ $t('button2') }}
diff --git a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 66b6e5a79..0588e6866 100644
--- a/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/src/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-number-keyboard__body"><i role="button" tabindex="0" class="van-hairline van-key">1</i><i role="button" tabindex="0" class="van-hairline van-key">2</i><i role="button" tabindex="0" class="van-hairline van-key">3</i><i role="button" tabindex="0" class="van-hairline van-key">4</i><i role="button" tabindex="0" class="van-hairline van-key">5</i><i role="button" tabindex="0" class="van-hairline van-key">6</i><i role="button" tabindex="0" class="van-hairline van-key">7</i><i role="button" tabindex="0" class="van-hairline van-key">8</i><i role="button" tabindex="0" class="van-hairline van-key">9</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray">.</i><i role="button" tabindex="0" class="van-hairline van-key">0</i><i role="button" tabindex="0" class="van-hairline van-key van-key--gray van-key--delete">删除</i></div>
     </div>
   </div>
-  <div><button class="van-button van-button--primary van-button--normal"><span class="van-button__text">
+  <div><button class="van-button van-button--info van-button--normal"><span class="van-button__text">
       弹出自定义键盘
     </span></button>
     <div class="van-number-keyboard van-number-keyboard--custom van-number-keyboard--safe-area-inset-bottom" style="z-index: 100; display: none;" name="van-slide-up">
diff --git a/src/stepper/index.js b/src/stepper/index.js
index 5fef38c03..3c4dad747 100644
--- a/src/stepper/index.js
+++ b/src/stepper/index.js
@@ -1,5 +1,6 @@
 import { createNamespace, isDef, addUnit } from '../utils';
 import { resetScroll } from '../utils/dom/reset-scroll';
+import { preventDefault } from '../utils/dom/event';
 
 const [createComponent, bem] = createNamespace('stepper');
 
@@ -76,15 +77,14 @@ export default createComponent({
     },
 
     buttonStyle() {
-      const style = {};
-
       if (this.buttonSize) {
         const size = addUnit(this.buttonSize);
-        style.width = size;
-        style.height = size;
-      }
 
-      return style;
+        return {
+          width: size,
+          height: size
+        };
+      }
     }
   },
 
@@ -188,7 +188,7 @@ export default createComponent({
       clearTimeout(this.longPressTimer);
 
       if (this.isLongPress) {
-        event.preventDefault();
+        preventDefault(event);
       }
     }
   },