From 8e911c75f928bb8e1102eeb0617e6d8a9f7df17a Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Wed, 25 Apr 2018 11:50:10 +0800
Subject: [PATCH] [Improvement] use bem mixin (#934)

---
 docs/demos/views/sku.vue                   |  2 +-
 docs/markdown/en-US/sku.md                 |  2 +-
 docs/markdown/zh-CN/sku.md                 |  2 +-
 packages/checkbox/index.vue                |  6 +--
 packages/circle/index.vue                  |  2 +-
 packages/pagination/index.vue              | 16 +++----
 packages/radio/index.vue                   |  2 +-
 packages/sku/components/SkuActions.vue     |  2 +-
 packages/sku/components/SkuHeader.vue      |  6 +--
 packages/sku/components/SkuImgUploader.vue | 13 +++---
 packages/sku/components/SkuMessages.vue    |  4 +-
 packages/sku/components/SkuRow.vue         |  4 +-
 packages/switch-cell/index.vue             |  2 +-
 packages/switch/index.vue                  | 13 +++---
 packages/tab/index.vue                     |  2 +-
 packages/tabbar-item/index.vue             |  6 +--
 packages/tabbar/index.vue                  |  2 +-
 packages/tabs/index.vue                    | 17 ++++----
 packages/tag/index.vue                     | 12 +++---
 packages/toast/toast.vue                   |  6 +--
 packages/tree-select/index.vue             | 16 +++----
 packages/vant-css/src/pagination.css       | 50 ++++++++++------------
 packages/vant-css/src/tab.css              | 32 +++++++-------
 packages/vant-css/src/tabbar.css           |  2 +-
 test/specs/pagination.spec.js              |  2 +-
 25 files changed, 107 insertions(+), 116 deletions(-)

diff --git a/docs/demos/views/sku.vue b/docs/demos/views/sku.vue
index e46eb8204..8810988a3 100644
--- a/docs/demos/views/sku.vue
+++ b/docs/demos/views/sku.vue
@@ -61,7 +61,7 @@
         >
           <template slot="sku-header-price" slot-scope="props">
             <div class="van-sku__goods-price">
-              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+              <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
             </div>
           </template>
           <template slot="sku-actions" slot-scope="props">
diff --git a/docs/markdown/en-US/sku.md b/docs/markdown/en-US/sku.md
index b1a5ec87d..263e8d689 100644
--- a/docs/markdown/en-US/sku.md
+++ b/docs/markdown/en-US/sku.md
@@ -67,7 +67,7 @@ Vue.use(Sku);
   <!-- custom sku-header-price -->
   <template slot="sku-header-price" slot-scope="props">
     <div class="van-sku__goods-price">
-      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
   <!-- custom sku actions -->
diff --git a/docs/markdown/zh-CN/sku.md b/docs/markdown/zh-CN/sku.md
index b3a7a6bb5..14407ee7b 100644
--- a/docs/markdown/zh-CN/sku.md
+++ b/docs/markdown/zh-CN/sku.md
@@ -67,7 +67,7 @@ Vue.use(Sku);
   <!-- 自定义 sku-header-price -->
   <template slot="sku-header-price" slot-scope="props">
     <div class="van-sku__goods-price">
-      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span> only!!!
+      <span class="van-sku__price-symbol">￥</span><span class="van-sku__price-num">{{ props.price }}</span>
     </div>
   </template>
   <!-- 自定义 sku actions -->
diff --git a/packages/checkbox/index.vue b/packages/checkbox/index.vue
index fc0252e84..834acc99b 100644
--- a/packages/checkbox/index.vue
+++ b/packages/checkbox/index.vue
@@ -1,16 +1,16 @@
 <template>
-  <div class="van-checkbox">
+  <div :class="b()">
     <icon
       name="success"
-      class="van-checkbox__icon"
       :class="[
+        b('icon'),
         `van-checkbox--${shape}`, {
           'van-checkbox--disabled': isDisabled,
           'van-checkbox--checked': isChecked
       }]"
       @click="onClick"
     />
-    <span v-if="$slots.default" class="van-checkbox__label" @click="onClick('label')">
+    <span v-if="$slots.default" :class="b('label')" @click="onClick('label')">
       <slot />
     </span>
   </div>
diff --git a/packages/circle/index.vue b/packages/circle/index.vue
index f376c411c..728280a9a 100644
--- a/packages/circle/index.vue
+++ b/packages/circle/index.vue
@@ -5,7 +5,7 @@
       <path :class="b('layer')" :style="layerStyle" :d="path" />
     </svg>
     <slot>
-      <div :class="b('text')" class="van-circle__text">{{ text }}</div>
+      <div :class="b('text')">{{ text }}</div>
     </slot>
   </div>
 </template>
diff --git a/packages/pagination/index.vue b/packages/pagination/index.vue
index 3150a8a7a..cfb5501f7 100644
--- a/packages/pagination/index.vue
+++ b/packages/pagination/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <ul class="van-pagination" :class="{ 'van-pagination-simple': !isMultiMode }">
+  <ul :class="b({ simple: !isMultiMode })">
     <li
-      class="van-pagination__item van-pagination__prev van-hairline"
-      :class="{ 'van-pagination--disabled': value === 1 }"
+      class="van-hairline"
+      :class="[b('item', { disabled: value === 1 }), b('prev')]"
       @click="selectPage(value - 1)"
     >
       {{ prevText || $t('prev') }}
@@ -10,18 +10,18 @@
     <li
       v-if="isMultiMode"
       v-for="(page, index) in pages"
-      class="van-pagination__item van-pagination__page van-hairline"
-      :class="{ 'van-pagination--active': page.active }"
+      class="van-hairline"
+      :class="[b('item', { active: page.active }), b('page')]"
       @click="selectPage(page.number)"
     >
       {{ page.text }}
     </li>
-    <li v-if="!isMultiMode" class="van-pagination__page-desc">
+    <li v-if="!isMultiMode" :class="b('page-desc')">
       <slot name="pageDesc">{{ pageDesc }}</slot>
     </li>
     <li
-      class="van-pagination__item van-pagination__next van-hairline"
-      :class="{ 'van-pagination--disabled': value === computedPageCount }"
+      class="van-hairline"
+      :class="[b('item', { disabled: value === computedPageCount }), b('next')]"
       @click="selectPage(value + 1)"
     >
       {{ nextText || $t('next') }}
diff --git a/packages/radio/index.vue b/packages/radio/index.vue
index dcbdeeff1..53c132036 100644
--- a/packages/radio/index.vue
+++ b/packages/radio/index.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
-    <span class="van-radio__input">
+    <span :class="b('input')">
       <input
         :value="name"
         v-model="currentValue"
diff --git a/packages/sku/components/SkuActions.vue b/packages/sku/components/SkuActions.vue
index 769d19548..427b5b1d3 100644
--- a/packages/sku/components/SkuActions.vue
+++ b/packages/sku/components/SkuActions.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-sku-actions">
+  <div :class="b()">
     <van-button
       v-if="showAddCartBtn"
       bottom-action
diff --git a/packages/sku/components/SkuHeader.vue b/packages/sku/components/SkuHeader.vue
index d389d4183..d8aab4d10 100644
--- a/packages/sku/components/SkuHeader.vue
+++ b/packages/sku/components/SkuHeader.vue
@@ -1,9 +1,9 @@
 <template>
-  <div class="van-sku-header van-hairline--bottom">
-    <div class="van-sku-header__img-wrap">
+  <div :class="b()" class="van-hairline--bottom">
+    <div :class="b('img-wrap')">
       <img :src="goodsImg" >
     </div>
-    <div class="van-sku-header__goods-info">
+    <div :class="b('goods-info')">
       <div class="van-sku__goods-name van-ellipsis">{{ goods.title }}</div>
       <!-- price display area -->
       <slot />
diff --git a/packages/sku/components/SkuImgUploader.vue b/packages/sku/components/SkuImgUploader.vue
index 502d0df92..1dbb49f16 100644
--- a/packages/sku/components/SkuImgUploader.vue
+++ b/packages/sku/components/SkuImgUploader.vue
@@ -1,14 +1,13 @@
 <template>
-  <div class="van-sku-img-uploader">
+  <div :class="b()">
     <!-- 头部 -->
     <van-uploader
       :disabled="!!paddingImg"
       :after-read="afterReadFile"
       :max-size="maxSize * 1024 * 1024"
-      accept="image/*"
       @oversize="$toast($t('maxSize', maxSize))"
     >
-      <div class="van-sku-img-uploader__header">
+      <div :class="b('header')">
         <div v-if="paddingImg">{{ $t('uploading') }}</div>
         <template v-else>
           <icon name="photograph" />
@@ -23,15 +22,15 @@
       <!-- 已有的图片,图片右上角显示删除按钮 -->
       <div
         v-for="(img, index) in imgList"
-        class="van-sku-img-uploader__img"
+        :class="b('img')"
       >
         <img :src="img">
-        <icon name="clear" class="van-sku-img-uploader__delete" @click="$emit('input', '')" />
+        <icon name="clear" :class="b('delete')" @click="$emit('input', '')" />
       </div>
       <!-- 正在上传的图片,有上传等待提示 -->
-      <div v-if="paddingImg" class="van-sku-img-uploader__img">
+      <div v-if="paddingImg" :class="b('img')">
         <img :src="paddingImg">
-        <loading class="van-sku-img-uploader__uploading" type="spinner" color="black" />
+        <loading :class="b('uploading')" type="spinner" color="black" />
       </div>
     </div>
   </div>
diff --git a/packages/sku/components/SkuMessages.vue b/packages/sku/components/SkuMessages.vue
index 80fa85459..6ee47962e 100644
--- a/packages/sku/components/SkuMessages.vue
+++ b/packages/sku/components/SkuMessages.vue
@@ -1,9 +1,9 @@
 <template>
-  <cell-group class="van-sku-messages">
+  <cell-group :class="b()">
     <template v-for="(message, index) in messages">
       <cell
         v-if="message.type === 'image'"
-        class="van-sku-messages__image-cell"
+        :class="b('image-cell')"
         :label="$t('onePic')"
         :key="`${goodsId}-${index}`"
         :required="message.required == '1'"
diff --git a/packages/sku/components/SkuRow.vue b/packages/sku/components/SkuRow.vue
index c132ba793..7e238a644 100644
--- a/packages/sku/components/SkuRow.vue
+++ b/packages/sku/components/SkuRow.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="van-sku-row">
-    <div class="van-sku-row__title">{{ skuRow.k }}：</div>
+  <div :class="b()">
+    <div :class="b('title')">{{ skuRow.k }}：</div>
     <slot />
   </div>
 </template>
diff --git a/packages/switch-cell/index.vue b/packages/switch-cell/index.vue
index c47e9ae52..6c1f38f6e 100644
--- a/packages/switch-cell/index.vue
+++ b/packages/switch-cell/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <cell center :title="title" :border="border" class="van-switch-cell">
+  <cell center :title="title" :border="border" :class="b()">
     <van-switch v-bind="$props" @input="$emit('input', $event)" />
   </cell>
 </template>
diff --git a/packages/switch/index.vue b/packages/switch/index.vue
index f27730b12..32e705a00 100644
--- a/packages/switch/index.vue
+++ b/packages/switch/index.vue
@@ -1,15 +1,14 @@
 <template>
   <div
-    class="van-switch"
-    :class="[{
-      'van-switch--on': value,
-      'van-switch--disabled': disabled
-    }]"
+    :class="b({
+      on: value,
+      disabled
+    })"
     :style="style"
     @click="onClick"
   >
-    <div class="van-switch__node">
-      <loading v-if="loading" class="van-switch__loading" />
+    <div :class="b('node')">
+      <loading v-if="loading" :class="b('loading')" />
     </div>
   </div>
 </template>
diff --git a/packages/tab/index.vue b/packages/tab/index.vue
index 45eed1fbd..176382069 100644
--- a/packages/tab/index.vue
+++ b/packages/tab/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tab__pane" :class="{ 'van-tab__pane--select': index === parent.curActive }">
+  <div :class="b('pane', { select: index === parent.curActive })">
     <slot />
   </div>
 </template>
diff --git a/packages/tabbar-item/index.vue b/packages/tabbar-item/index.vue
index 4e8815764..259e9eafd 100644
--- a/packages/tabbar-item/index.vue
+++ b/packages/tabbar-item/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <div class="van-tabbar-item" :class="{ 'van-tabbar-item--active': active }" @click="onClick">
-    <div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
+  <div :class="b({ active })" @click="onClick">
+    <div :class="b('icon', { dot })">
       <slot name="icon" :active="active">
         <icon v-if="icon" :name="icon" />
       </slot>
       <div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
     </div>
-    <div class="van-tabbar-item__text">
+    <div :class="b('text')">
       <slot :active="active"/>
     </div>
   </div>
diff --git a/packages/tabbar/index.vue b/packages/tabbar/index.vue
index 4726734ce..b2c425aa0 100644
--- a/packages/tabbar/index.vue
+++ b/packages/tabbar/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-tabbar van-hairline--top-bottom" :class="{ 'van-tabbar--fixed': fixed }">
+  <div class="van-hairline--top-bottom" :class="b({ fixed })">
     <slot />
   </div>
 </template>
diff --git a/packages/tabs/index.vue b/packages/tabs/index.vue
index e0bc80de1..1ad7c2f03 100644
--- a/packages/tabs/index.vue
+++ b/packages/tabs/index.vue
@@ -1,15 +1,14 @@
 <template>
-  <div class="van-tabs" :class="`van-tabs--${type}`">
+  <div :class="b([type])">
     <div
       ref="wrap"
-      class="van-tabs__wrap"
-      :class="[`van-tabs__wrap--${position}`, {
-        'van-tabs--scrollable': scrollable,
-        'van-hairline--top-bottom': type === 'line'
-      }]"
+      :class="[
+        b('wrap', [position, { scrollable }]),
+        { 'van-hairline--top-bottom': type === 'line' }
+      ]"
     >
-      <div class="van-tabs__nav" :class="`van-tabs__nav--${type}`" ref="nav">
-        <div v-if="type === 'line'" class="van-tabs__nav-bar" :style="navBarStyle" />
+      <div :class="b('nav', [type])" ref="nav">
+        <div v-if="type === 'line'" :class="b('nav-bar')" :style="navBarStyle" />
         <div
           v-for="(tab, index) in tabs"
           ref="tabs"
@@ -25,7 +24,7 @@
         </div>
       </div>
     </div>
-    <div class="van-tabs__content" ref="content">
+    <div :class="b('content')" ref="content">
       <slot />
     </div>
   </div>
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
index b7cd1a906..2cbb2864d 100644
--- a/packages/tag/index.vue
+++ b/packages/tag/index.vue
@@ -1,11 +1,11 @@
 <template>
   <span
-    class="van-tag van-hairline--surround"
-    :class="{
-      [`van-tag--${type}`]: type,
-      'van-tag--plain': plain,
-      'van-tag--mark': mark
-    }"
+    class="van-hairline--surround"
+    :class="b({
+      mark,
+      plain,
+      [type]: type
+    })"
   >
     <slot />
   </span>
diff --git a/packages/toast/toast.vue b/packages/toast/toast.vue
index 40789632c..e1336260e 100644
--- a/packages/toast/toast.vue
+++ b/packages/toast/toast.vue
@@ -1,6 +1,6 @@
 <template>
   <transition name="van-fade">
-    <div class="van-toast" :class="[`van-toast--${displayStyle}`, `van-toast--${position}`]" v-show="value">
+    <div v-show="value" :class="b([displayStyle, position])">
       <!-- text only -->
       <div v-if="displayStyle === 'text'">{{ message }}</div>
       <div v-if="displayStyle === 'html'" v-html="message" />
@@ -8,8 +8,8 @@
       <!-- with icon -->
       <template v-if="displayStyle === 'default'">
         <loading v-if="type === 'loading'" color="white" />
-        <icon v-else class="van-toast__icon" :name="type" />
-        <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
+        <icon v-else :class="b('icon')" :name="type" />
+        <div v-if="hasMessage" :class="b('text')">{{ message }}</div>
       </template>
     </div>
   </transition>
diff --git a/packages/tree-select/index.vue b/packages/tree-select/index.vue
index a2fe3402b..249c93953 100644
--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@@ -1,26 +1,26 @@
 <template>
-  <div class="van-tree-select" :style="{ height: mainHeight + 'px' }">
-    <div class="van-tree-select__nav">
+  <div :class="b()" :style="{ height: mainHeight + 'px' }">
+    <div :class="b('nav')">
       <div
         v-for="(item, index) in items"
-        class="van-tree-select__nitem van-ellipsis"
-        :class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }"
+        class="van-ellipsis"
+        :class="b('nitem', { active: mainActiveIndex === index })"
         @click="$emit('navclick', index)">
         {{ item.text }}
       </div>
     </div>
-    <div class="van-tree-select__content" :style="{ height: itemHeight + 'px' }">
+    <div :class="b('content')" :style="{ height: itemHeight + 'px' }">
       <div
         v-for="item in subItems"
         :key="item.id"
-        class="van-tree-select__item van-ellipsis"
-        :class="{ 'van-tree-select__item--active': activeId === item.id }"
+        class="van-ellipsis"
+        :class="b('item', { active: activeId === item.id })"
         @click="onItemSelect(item)">
         {{ item.text }}
         <icon
           v-if="activeId === item.id"
           name="success"
-          class="van-tree-select__selected"
+          :class="b('selected')"
         />
       </div>
     </div>
diff --git a/packages/vant-css/src/pagination.css b/packages/vant-css/src/pagination.css
index 2a8d0a681..2668b0f16 100644
--- a/packages/vant-css/src/pagination.css
+++ b/packages/vant-css/src/pagination.css
@@ -28,31 +28,27 @@
     &:last-child::after {
       border-right-width: 1px;
     }
-  }
 
-  &__prev,
-  &__next {
-    &.van-pagination__item {
-      padding: 0 5px;
-    }
-  }
-
-  &__page {
-    flex-grow: 0;
-
-    &.van-pagination--active {
-      background-color: $blue;
-      color: $white;
-    }
-  }
-
-  &--disabled {
-
-    &.van-pagination__item {
+    &--disabled,
+    &--disabled:active {
       background-color: $background-color;
       color: $gray-darker;
       opacity: 0.6;
     }
+
+    &--active {
+      color: $white;
+      background-color: $blue;
+    }
+  }
+
+  &__prev,
+  &__next {
+    padding: 0 5px;
+  }
+
+  &__page {
+    flex-grow: 0;
   }
 
   &__page-desc {
@@ -60,15 +56,13 @@
     height: 40px;
     color: $gray-darker;
   }
-}
 
-.van-pagination-simple {
-
-  .van-pagination__prev,
-  .van-pagination__next {
-
-    &.van-pagination__item::after {
-      border-width: 1px;
+  &--simple {
+    .van-pagination__prev,
+    .van-pagination__next {
+      &::after {
+        border-width: 1px;
+      }
     }
   }
 }
diff --git a/packages/vant-css/src/tab.css b/packages/vant-css/src/tab.css
index 413ca3706..c9f80b2db 100644
--- a/packages/vant-css/src/tab.css
+++ b/packages/vant-css/src/tab.css
@@ -22,6 +22,22 @@ $van-tabs-card-height: 30px;
       top: auto;
       bottom: 0;
     }
+
+    &--scrollable {
+      .van-tab {
+        flex: 0 0 22%;
+      }
+
+      .van-tabs__nav {
+        overflow: hidden;
+        overflow-x: auto;
+        -webkit-overflow-scrolling: touch;
+
+        &::-webkit-scrollbar {
+          display: none;
+        }
+      }
+    }
   }
 
   &__nav {
@@ -69,22 +85,6 @@ $van-tabs-card-height: 30px;
     background-color: $red;
   }
 
-  &--scrollable {
-    .van-tab {
-      flex: 0 0 22%;
-    }
-
-    .van-tabs__nav {
-      overflow: hidden;
-      overflow-x: auto;
-      -webkit-overflow-scrolling: touch;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-    }
-  }
-
   &--line {
     padding-top: $van-tabs-line-height;
 
diff --git a/packages/vant-css/src/tabbar.css b/packages/vant-css/src/tabbar.css
index 4a2c82f33..8551a4955 100644
--- a/packages/vant-css/src/tabbar.css
+++ b/packages/vant-css/src/tabbar.css
@@ -31,7 +31,7 @@
         display: block;
       }
 
-      &-dot {
+      &--dot {
         &::after {
           top: 0;
           right: -8px;
diff --git a/test/specs/pagination.spec.js b/test/specs/pagination.spec.js
index 1e5828221..431cfb30d 100644
--- a/test/specs/pagination.spec.js
+++ b/test/specs/pagination.spec.js
@@ -38,7 +38,7 @@ describe('Pagination', () => {
         expect(
           wrapper
             .find('.van-pagination__next')[0]
-            .hasClass('van-pagination--disabled')
+            .hasClass('van-pagination__item--disabled')
         ).to.be.true;
         done();
       });