From b0f4096e88597772728e178147b0cf26b52ccadd Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 24 Apr 2018 11:53:06 +0800
Subject: [PATCH] [Improvement] component use bem mixin (#921)

---
 packages/cell-swipe/index.vue         | 12 ++++++++----
 packages/checkbox-group/index.vue     |  2 +-
 packages/circle/index.vue             |  8 ++++----
 packages/collapse-item/index.vue      | 13 ++++++-------
 packages/collapse/index.vue           |  2 +-
 packages/contact-card/index.vue       | 14 +++++++-------
 packages/contact-edit/index.vue       |  4 ++--
 packages/contact-list/index.vue       | 11 ++++++-----
 packages/coupon-cell/index.vue        |  2 +-
 packages/coupon-list/Item.vue         | 17 +++++++++++------
 packages/coupon-list/index.vue        | 16 +++++++++-------
 packages/dialog/dialog.vue            | 15 +++++++--------
 packages/vant-css/src/coupon-list.css |  4 ++--
 packages/vant-css/src/dialog.css      |  2 +-
 14 files changed, 66 insertions(+), 56 deletions(-)

diff --git a/packages/cell-swipe/index.vue b/packages/cell-swipe/index.vue
index f9bbb5501..02d7f64e4 100644
--- a/packages/cell-swipe/index.vue
+++ b/packages/cell-swipe/index.vue
@@ -1,19 +1,23 @@
 <template>
   <div
     v-clickoutside:touchstart="onClick"
-    class="van-cell-swipe"
+    :class="b()"
     @click="onClick('cell')"
     @touchstart="startDrag"
     @touchmove="onDrag"
     @touchend="endDrag"
     @touchcancel="endDrag"
   >
-    <div class="van-cell-swipe__wrapper" :style="wrapperStyle" @transitionend="swipe = false">
-      <div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth">
+    <div
+      :class="b('wrapper')"
+      :style="wrapperStyle"
+      @transitionend="swipe = false"
+    >
+      <div v-if="leftWidth" :class="b('left')" @click.stop="onClick('left')">
         <slot name="left" />
       </div>
       <slot />
-      <div class="van-cell-swipe__right" @click.stop="onClick('right')" v-if="rightWidth">
+      <div v-if="rightWidth" :class="b('right')" @click.stop="onClick('right')">
         <slot name="right" />
       </div>
     </div>
diff --git a/packages/checkbox-group/index.vue b/packages/checkbox-group/index.vue
index f336b4c13..f299fa7a6 100644
--- a/packages/checkbox-group/index.vue
+++ b/packages/checkbox-group/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-checkbox-group">
+  <div :class="b()">
     <slot />
   </div>
 </template>
diff --git a/packages/circle/index.vue b/packages/circle/index.vue
index 4fb7f0091..f376c411c 100644
--- a/packages/circle/index.vue
+++ b/packages/circle/index.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="van-circle" :style="style">
+  <div :class="b()" :style="style">
     <svg viewBox="0 0 1060 1060">
-      <path class="van-circle__hover" :style="hoverStyle" :d="path" />
-      <path class="van-circle__layer" :style="layerStyle" :d="path" />
+      <path :class="b('hover')" :style="hoverStyle" :d="path" />
+      <path :class="b('layer')" :style="layerStyle" :d="path" />
     </svg>
     <slot>
-      <div class="van-circle__text">{{ text }}</div>
+      <div :class="b('text')" class="van-circle__text">{{ text }}</div>
     </slot>
   </div>
 </template>
diff --git a/packages/collapse-item/index.vue b/packages/collapse-item/index.vue
index 9697e94b9..1572837dd 100644
--- a/packages/collapse-item/index.vue
+++ b/packages/collapse-item/index.vue
@@ -1,15 +1,14 @@
 <template>
   <div
-    class="van-collapse-item"
-    :class="{
-      'van-hairline--top': index,
-      'van-collapse-item--expanded': expanded
-    }"
+    :class="[
+      b({ expanded }),
+      { 'van-hairline--top': index }
+    ]"
   >
-    <cell class="van-collapse-item__title" is-link @click="onClick">
+    <cell :class="b('title')" is-link @click="onClick">
       <slot name="title">{{ title }}</slot>
     </cell>
-    <div class="van-collapse-item__content" v-show="expanded">
+    <div v-show="expanded" :class="b('content')">
       <slot />
     </div>
   </div>
diff --git a/packages/collapse/index.vue b/packages/collapse/index.vue
index 9b495dd14..953e11c96 100644
--- a/packages/collapse/index.vue
+++ b/packages/collapse/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-collapse van-hairline--top-bottom">
+  <div :class="b()" class="van-hairline--top-bottom">
     <slot />
   </div>
 </template>
diff --git a/packages/contact-card/index.vue b/packages/contact-card/index.vue
index 5c604d3b7..a9f78b60e 100644
--- a/packages/contact-card/index.vue
+++ b/packages/contact-card/index.vue
@@ -1,19 +1,19 @@
 <template>
-  <div class="van-contact-card" :class="[`van-contact-card--${type}`, { 'van-contact-card--uneditable': !editable }]" @click="onClick">
-    <div class="van-contact-card__content">
+  <div :class="b([type, { uneditable: !editable }])" @click="onClick">
+    <div :class="b('content')">
       <template v-if="type === 'add'">
-        <icon class="van-contact-card__icon" name="add2" />
-        <div class="van-contact-card__text">{{ addText || $t('addText') }}</div>
+        <icon :class="b('icon')" name="add2" />
+        <div :class="b('text')">{{ addText || $t('addText') }}</div>
       </template>
       <template v-else-if="type === 'edit'">
-        <icon class="van-contact-card__icon" name="contact" />
-        <div class="van-contact-card__text">
+        <icon :class="b('icon')" name="contact" />
+        <div :class="b('text')">
           <div>{{ $t('contact') }}：{{ name }}</div>
           <div>{{ $t('tel') }}：{{ tel }}</div>
         </div>
       </template>
     </div>
-    <icon v-if="editable" class="van-contact-card__arrow" name="arrow" />
+    <icon v-if="editable" :class="b('arrow')" name="arrow" />
   </div>
 </template>
 
diff --git a/packages/contact-edit/index.vue b/packages/contact-edit/index.vue
index 2bf76fcab..f51b95b50 100644
--- a/packages/contact-edit/index.vue
+++ b/packages/contact-edit/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="van-contact-edit">
+  <div :class="b()">
     <cell-group>
       <field
         v-model="data.name"
@@ -18,7 +18,7 @@
         @focus="onFocus('tel')"
       />
     </cell-group>
-    <div class="van-contact-edit__buttons">
+    <div :class="b('buttons')">
       <van-button block :loading="isSaving" @click="onSave" type="primary">{{ $t('save') }}</van-button>
       <van-button block :loading="isDeleting" @click="onDelete" v-if="isEdit">{{ $t('delete') }}</van-button>
     </div>
diff --git a/packages/contact-list/index.vue b/packages/contact-list/index.vue
index 58bd28290..207979280 100644
--- a/packages/contact-list/index.vue
+++ b/packages/contact-list/index.vue
@@ -1,20 +1,21 @@
 <template>
-  <div class="van-contact-list">
+  <div :class="b()">
     <radio-group :value="value" @input="$emit('input', $event)">
       <cell-group>
         <cell v-for="(item, index) in list" :key="item.id" is-link>
           <radio :name="item.id" @click="$emit('select', item, index)">
-            <p class="van-contact-list__text">{{ $t('contact') }}：{{ item.name }}</p>
-            <p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</p>
+            <p :class="b('text')">{{ $t('contact') }}：{{ item.name }}</p>
+            <p :class="b('text')">{{ $t('tel') }}：{{ item.tel }}</p>
           </radio>
-          <icon slot="right-icon" name="edit" class="van-contact-list__edit" @click="$emit('edit', item, index)" />
+          <icon slot="right-icon" name="edit" :class="b('edit')" @click="$emit('edit', item, index)" />
         </cell>
       </cell-group>
     </radio-group>
     <cell
       icon="add"
       is-link
-      class="van-contact-list__add van-hairline--top"
+      :class="b('add')"
+      class="van-hairline--top"
       :title="addText || $t('addText')"
       @click="$emit('add')"
     />
diff --git a/packages/coupon-cell/index.vue b/packages/coupon-cell/index.vue
index c49719479..8aa6de031 100644
--- a/packages/coupon-cell/index.vue
+++ b/packages/coupon-cell/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <cell-group class="van-coupon-cell">
+  <cell-group :class="b()">
     <cell :title="title || $t('title')" :value="value" :is-link="editable" @click="$emit('click')" />
   </cell-group>
 </template>
diff --git a/packages/coupon-list/Item.vue b/packages/coupon-list/Item.vue
index 9ad446256..b00c4429c 100644
--- a/packages/coupon-list/Item.vue
+++ b/packages/coupon-list/Item.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
-    <div class="van-coupon-item__head">
-      <div class="van-coupon-item__lines" />
-      <div class="van-coupon-item__gradient">
+  <div :class="b({ disabled })">
+    <div :class="b('head')">
+      <div :class="b('lines')" />
+      <div :class="b('gradient')">
         <h2 v-html="faceAmount" />
         <p>{{ conditionMessage }}</p>
       </div>
     </div>
-    <div class="van-coupon-item__body">
+    <div :class="b('body')">
       <h2>{{ data.name }}</h2>
       <span>{{ validPeriod }}</span>
       <p v-if="disabled && data.reason">{{ data.reason }}</p>
-      <div class="van-coupon-item__corner" v-if="chosen">
+      <div v-if="chosen" :class="b('corner')" >
         <icon name="success" />
       </div>
     </div>
@@ -34,6 +34,7 @@ export default create({
     validPeriod() {
       return `${this.getDate(this.data.start_at)}-${this.getDate(this.data.end_at)}`;
     },
+
     faceAmount() {
       return this.data.denominations !== 0
         ? `<span>¥</span> ${this.formatAmount(this.data.denominations)}`
@@ -41,6 +42,7 @@ export default create({
           ? this.formatDiscount(this.data.discount)
           : '';
     },
+
     conditionMessage() {
       let condition = this.data.origin_condition;
       condition = condition % 100 === 0 ? Math.round(condition / 100) : (condition / 100).toFixed(2);
@@ -53,12 +55,15 @@ export default create({
       const date = new Date(timeStamp * 1000);
       return `${date.getFullYear()}.${this.padZero(date.getMonth() + 1)}.${this.padZero(date.getDate())}`;
     },
+
     padZero(num) {
       return (num < 10 ? '0' : '') + num;
     },
+
     formatDiscount(discount) {
       return this.$t('discount', `${(discount / 10).toFixed(discount % 10 === 0 ? 0 : 1)}`);
     },
+
     formatAmount(amount) {
       return (amount / 100).toFixed(amount % 100 === 0 ? 0 : amount % 10 === 0 ? 1 : 2);
     }
diff --git a/packages/coupon-list/index.vue b/packages/coupon-list/index.vue
index fecee7946..6a29b857e 100644
--- a/packages/coupon-list/index.vue
+++ b/packages/coupon-list/index.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="van-coupon-list">
-    <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
+  <div :class="b()">
+    <cell-group v-if="showExchangeBar" :class="b('top')">
       <field
-        class="van-coupon-list__filed van-hairline--surround"
+        :class="b('field')"
+        class="van-hairline--surround"
         v-model="currentCode"
         :placeholder="inputPlaceholder || $t('placeholder')"
         :maxlength="20"
@@ -10,14 +11,14 @@
       <van-button
         size="small"
         type="danger"
-        class="van-coupon-list__exchange"
+        :class="b('exchange')"
         :text="exchangeButtonText || $t('exchange')"
         :loading="exchangeButtonLoading"
         :disabled="buttonDisabled"
         @click="onClickExchangeButton"
       />
     </cell-group>
-    <div class="van-coupon-list__list" :class="{ 'van-coupon-list--with-exchange': showExchangeBar }" ref="list">
+    <div :class="b('list', { 'with-exchange': showExchangeBar })" ref="list">
       <coupon-item
         ref="card"
         v-for="(item, index) in coupons"
@@ -33,7 +34,7 @@
         :key="item.id || item.name"
         :data="item"
       />
-      <div class="van-coupon-list__empty" v-if="!coupons.length && !disabledCoupons.length">
+      <div v-if="!coupons.length && !disabledCoupons.length" :class="b('empty')">
         <img src="https://img.yzcdn.cn/v2/image/wap/trade/new_order/empty@2x.png" >
         <p>{{ $t('empty') }}</p>
       </div>
@@ -41,7 +42,8 @@
     <div
       v-show="showCloseButton"
       v-text="closeButtonText || $t('close')"
-      class="van-coupon-list__close van-hairline--top"
+      :class="b('close')"
+      class="van-hairline--top"
       @click="$emit('change', -1)"
     />
   </div>
diff --git a/packages/dialog/dialog.vue b/packages/dialog/dialog.vue
index 8446fa7e9..83c9ced24 100644
--- a/packages/dialog/dialog.vue
+++ b/packages/dialog/dialog.vue
@@ -1,18 +1,18 @@
 <template>
   <transition name="van-dialog-bounce">
-    <div class="van-dialog" v-show="value">
-      <div class="van-dialog__header" v-if="title" v-text="title" />
-      <div class="van-dialog__content van-hairline">
+    <div v-show="value" :class="b()">
+      <div v-if="title" v-text="title" :class="b('header')" />
+      <div :class="b('content')" class="van-hairline">
         <slot>
-          <div class="van-dialog__message" v-if="message" :class="{ 'van-dialog__message--withtitle': title }" v-html="message" />
+          <div v-if="message" v-html="message" :class="b('message', { withtitle: title })" />
         </slot>
       </div>
-      <div class="van-dialog__footer" :class="{ 'is-twobtn': showCancelButton && showConfirmButton }">
+      <div :class="b('footer', { 'buttons': showCancelButton && showConfirmButton })">
         <van-button
           v-show="showCancelButton"
           :loading="loading.cancel"
           size="large"
-          class="van-dialog__cancel"
+          :class="b('cancel')"
           @click="handleAction('cancel')"
         >
           {{ cancelButtonText || $t('cancel') }}
@@ -21,8 +21,7 @@
           v-show="showConfirmButton"
           size="large"
           :loading="loading.confirm"
-          class="van-dialog__confirm"
-          :class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
+          :class="[b('confirm'), { 'van-hairline--left': showCancelButton && showConfirmButton }]"
           @click="handleAction('confirm')"
         >
           {{ confirmButtonText || $t('confirm') }}
diff --git a/packages/vant-css/src/coupon-list.css b/packages/vant-css/src/coupon-list.css
index dc5372371..9b6a06072 100644
--- a/packages/vant-css/src/coupon-list.css
+++ b/packages/vant-css/src/coupon-list.css
@@ -17,7 +17,7 @@
       box-sizing: border-box;
     }
 
-    &__filed {
+    &__field {
       margin: 10px 0;
       padding: 4px 10px 4px 25px;
 
@@ -77,7 +77,7 @@
       }
     }
 
-    &--with-exchange {
+    &__list--with-exchange {
       padding-top: 60px;
     }
 
diff --git a/packages/vant-css/src/dialog.css b/packages/vant-css/src/dialog.css
index 5660d3598..d43d6d901 100644
--- a/packages/vant-css/src/dialog.css
+++ b/packages/vant-css/src/dialog.css
@@ -36,7 +36,7 @@
   &__footer {
     overflow: hidden;
 
-    &.is-twobtn {
+    &--buttons {
       display: flex;
 
       .van-button {