[Improvement] more component use bem mixin (#924)

packages/field/index.vue

@@ -3,46 +3,45 @@
     :title="label"
     :center="center"
     :required="required"
-    class="van-field"
+    :class="b({
-    :class="{
+      error,
-      'van-field--disabled': $attrs.disabled,
+      disabled: $attrs.disabled,
-      'van-field--error': error,
+      'has-icon': hasIcon,
-      'van-field--min-height': type === 'textarea' && !autosize,
+      'min-height': type === 'textarea' && !autosize
-      'van-field--has-icon': hasIcon
+    })"
-    }"
   >
     <textarea
       v-if="type === 'textarea'"
       v-bind="$attrs"
       v-on="listeners"
       ref="textarea"
-      class="van-field__control"
+      :class="b('control')"
       :value="value"
     />
     <input
       v-else
       v-bind="$attrs"
       v-on="listeners"
-      class="van-field__control"
+      :class="b('control')"
       :type="type"
       :value="value"
     >
     <div
       v-if="errorMessage"
       v-text="errorMessage"
-      class="van-field__error-message"
+      :class="b('error-message')"
     />
     <div
       v-if="hasIcon"
       v-show="$slots.icon || value"
-      class="van-field__icon"
+      :class="b('icon')"
       @touchstart.prevent="onClickIcon"
     >
       <slot name="icon">
         <icon :name="icon" />
       </slot>
     </div>
-    <div class="van-field__button" v-if="$slots.button" slot="extra">
+    <div v-if="$slots.button" :class="b('button')" slot="extra">
       <slot name="button" />
     </div>
   </cell>

packages/goods-action-big-btn/index.vue

@@ -2,7 +2,7 @@
   <van-button
     tag="a"
     :href="url"
-    class="van-goods-action__big-btn"
+    :class="b()"
     :type="primary ? 'primary' : 'default'"
     bottom-action
     @click="onClick"

packages/goods-action-mini-btn/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <a :href="url" class="van-goods-action__mini-btn van-hairline" @click="onClick">
+  <a :href="url" :class="b()" class="van-hairline" @click="onClick">
-    <icon class="van-goods-action__mini-btn-icon" :class="iconClass" :info="info" :name="icon" />
+    <icon :class="[b('icon'), iconClass]" :info="info" :name="icon" />
     <slot>{{ text }}</slot>
   </a>
 </template>

packages/goods-action/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-goods-action">
+  <div :class="b()">
     <slot />
   </div>
 </template>

packages/icon/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <i class="van-icon" :class="`van-icon-${name}`" v-on="$listeners">
+  <i :class="[b(), `van-icon-${name}`]" v-on="$listeners">
     <slot />
-    <div v-if="isDef(info)" class="van-icon__info">{{ info }}</div>
+    <div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
   </i>
 </template>
 

packages/image-preview/image-preview.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="value"
-    class="van-image-preview"
+    :class="b()"
     @touchstart="onTouchStart"
     @touchmove.prevent="touchMove"
     @touchend="onTouchEnd"
@@ -9,7 +9,7 @@
   >
     <swipe :initial-swipe="startPosition">
       <swipe-item v-for="(item, index) in images" :key="index">
-        <img class="van-image-preview__image" :src="item" >
+        <img :class="b('image')" :src="item" >
       </swipe-item>
     </swipe>
   </div>

packages/list/index.vue

@@ -1,10 +1,10 @@
 <template>
-  <div class="van-list">
+  <div :class="b()">
     <slot />
-    <div class="van-list__loading" v-show="loading">
+    <div v-show="loading" :class="b('loading')">
       <slot name="loading">
         <loading />
-        <span class="van-list__loading-text">{{ $t('loadingTip') }}</span>
+        <span :class="b('loading-text')">{{ $t('loadingTip') }}</span>
       </slot>
     </div>
   </div>

packages/loading/index.vue

@@ -1,8 +1,8 @@
 <template>
-  <div class="van-loading" :class="['van-loading--' + type, 'van-loading--' + color]" :style="style">
+  <div :class="b([type, color])" :style="style">
-    <span class="van-loading__spinner" :class="'van-loading__spinner--' + type">
+    <span :class="b('spinner', type)">
       <i v-for="item in (type === 'spinner' ? 12 : 0)" />
-      <svg v-if="type === 'circular'" class="van-loading__circular" viewBox="25 25 50 50">
+      <svg v-if="type === 'circular'" :class="b('circular')" viewBox="25 25 50 50">
         <circle cx="50" cy="50" r="20" fill="none"/>
       </svg>
     </span>

packages/nav-bar/index.vue

@@ -1,21 +1,21 @@
 <template>
   <div
-    class="van-nav-bar van-hairline--bottom"
+    class="van-hairline--bottom"
-    :class="{ 'van-nav-bar--fixed': fixed }"
+    :class="b({ fixed })"
     :style="style"
   >
-    <div class="van-nav-bar__left" @click="$emit('click-left')">
+    <div :class="b('left')" @click="$emit('click-left')">
       <slot name="left">
-        <icon v-if="leftArrow" class="van-nav-bar__arrow" name="arrow" />
+        <icon v-if="leftArrow" :class="b('arrow')" name="arrow" />
-        <span v-if="leftText" v-text="leftText" class="van-nav-bar__text" />
+        <span v-if="leftText" v-text="leftText" :class="b('text')" />
       </slot>
     </div>
-    <div class="van-nav-bar__title van-ellipsis">
+    <div :class="b('title')" class="van-ellipsis">
       <slot name="title">{{ title }}</slot>
     </div>
-    <div class="van-nav-bar__right" @click="$emit('click-right')">
+    <div :class="b('right')" @click="$emit('click-right')">
       <slot name="right">
-        <span v-if="rightText" v-text="rightText" class="van-nav-bar__text" />
+        <span v-if="rightText" v-text="rightText" :class="b('text')" />
       </slot>
     </div>
   </div>

packages/notice-bar/index.vue

@@ -1,19 +1,17 @@
 <template>
   <div
     v-show="showNoticeBar"
-    class="van-notice-bar"
+    :class="b({ withicon: mode })"
-    :class="{ 'van-notice-bar--withicon': mode }"
     :style="barStyle"
     @click="$emit('click')"
   >
-    <div class="van-notice-bar__left-icon" v-if="leftIcon">
+    <div v-if="leftIcon" :class="b('left-icon')">
       <img :src="leftIcon" >
     </div>
-    <div class="van-notice-bar__content-wrap" ref="contentWrap">
+    <div :class="b('wrap')" ref="wrap">
       <div
         ref="content"
-        class="van-notice-bar__content"
+        :class="[b('content'), animationClass]"
-        :class="animationClass"
         :style="contentStyle"
         @animationend="onAnimationEnd"
         @webkitAnimationEnd="onAnimationEnd"
@@ -21,7 +19,12 @@
         <slot>{{ text }}</slot>
       </div>
     </div>
-    <icon class="van-notice-bar__right-icon" :name="iconName" v-if="iconName" @click="onClickIcon" />
+    <icon
+      v-if="iconName"
+      :class="b('right-icon')"
+      :name="iconName"
+      @click="onClickIcon"
+    />
   </div>
 </template>
 
@@ -95,21 +98,23 @@ export default create({
     onClickIcon() {
       this.showNoticeBar = this.mode !== 'closeable';
     },
+
     onAnimationEnd() {
       this.firstRound = false;
       this.$nextTick(() => {
         this.duration = (this.offsetWidth + this.wrapWidth) / this.speed;
-        this.animationClass = 'van-notice-bar__play--infinite';
+        this.animationClass = this.b('play--infinite');
       });
     },
+
     initAnimation() {
       const offsetWidth = this.$refs.content.getBoundingClientRect().width;
-      const wrapWidth = this.$refs.contentWrap.getBoundingClientRect().width;
+      const wrapWidth = this.$refs.wrap.getBoundingClientRect().width;
       if (this.scrollable && offsetWidth > wrapWidth) {
         this.wrapWidth = wrapWidth;
         this.offsetWidth = offsetWidth;
         this.duration = offsetWidth / this.speed;
-        this.animationClass = 'van-notice-bar__play';
+        this.animationClass = this.b('play');
       }
     }
   }

packages/number-keyboard/Key.vue

@@ -5,13 +5,17 @@
     @touchmove="onBlur"
     @touchend="onBlur"
     @touchcancel="onBlur"
-    class="van-hairline van-key"
+    class="van-hairline"
-    :class="className"
+    :class="[b(), className]"
   />
 </template>
 
 <script>
-export default {
+import create from '../utils/create';
+
+export default create({
+  name: 'key',
+
   props: {
     text: [String, Number],
     type: {
@@ -31,7 +35,7 @@ export default {
       const types = this.type.slice(0);
       this.active && types.push('active');
 
-      return types.map(type => `van-key--${type}`);
+      return types.map(type => this.b([type]));
     }
   },
 
@@ -45,5 +49,5 @@ export default {
       this.active = false;
     }
   }
-};
+});
 </script>

packages/number-keyboard/index.vue

@@ -3,30 +3,29 @@
     <div
       v-show="show"
       :style="style"
-      class="van-number-keyboard"
+      :class="b([theme])"
-      :class="`van-number-keyboard--${theme}`"
       @animationend="onAnimationEnd"
       @webkitAnimationEnd="onAnimationEnd"
     >
-      <div class="van-number-keyboard__title van-hairline--top" v-if="title || showTitleClose">
+      <div :class="b('title')" class="van-hairline--top" v-if="title || showTitleClose">
         <span v-text="title" />
         <span
-          class="van-number-keyboard__close"
+          :class="b('close')"
           v-if="showTitleClose"
           v-text="closeButtonText"
           @click="onBlur"
         />
       </div>
-      <div class="van-number-keyboard__body">
+      <div :class="b('body')">
         <key
           v-for="(key, index) in keys"
-          :key="index"
+          :key="key.text"
           :text="key.text"
           :type="key.type"
           @press="onPressKey"
         />
       </div>
-      <div class="van-number-keyboard__sidebar" v-if="theme === 'custom'">
+      <div v-if="theme === 'custom'" :class="b('sidebar')">
         <key :text="'delete'" :type="['delete', 'big']" @press="onPressKey" />
         <key :text="closeButtonText" :type="['green', 'big']" @press="onPressKey" />
       </div>

packages/vant-css/src/goods-action.css

@@ -7,7 +7,7 @@
   display: flex;
   position: fixed;
 
-  &__big-btn {
+  &-big-btn {
     flex: 1;
     padding: 0;
 
@@ -16,7 +16,7 @@
     }
   }
 
-  &__mini-btn {
+  &-mini-btn {
     color: $gray-darker;
     display: flex;
     height: 50px;
@@ -40,7 +40,7 @@
       background-color: $active-color;
     }
 
-    &-icon {
+    &__icon {
       font-size: 20px;
       margin-bottom: 5px;
     }

packages/vant-css/src/notice-bar.css

@@ -34,7 +34,7 @@
     line-height: 1;
   }
 
-  &__content-wrap {
+  &__wrap {
     flex: 1;
     height: 18px;
     overflow: hidden;

test/specs/goods-action.spec.js

@@ -16,8 +16,8 @@ describe('GoodsAction', () => {
 
     DOMChecker(wrapper, {
       count: {
-        '.van-goods-action__mini-btn': 2,
+        '.van-goods-action-mini-btn': 2,
-        '.van-goods-action__big-btn': 2,
+        '.van-goods-action-big-btn': 2,
         '.van-icon-chat': 1
       }
     });