[Improvement] use bem mixin (#934)

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">

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 -->

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 -->

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>

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>

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') }}

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"

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

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 />

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>

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'"

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>

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>

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>

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>

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>

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>

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>

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>

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>

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>

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;
+      }
     }
   }
 }

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;
 

packages/vant-css/src/tabbar.css

@@ -31,7 +31,7 @@
         display: block;
       }
 
-      &-dot {
+      &--dot {
         &::after {
           top: 0;
           right: -8px;

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();
       });