Merge branch 'dev' of https://github.com/youzan/vant into dev

docs/demos/views/checkbox.vue

@@ -1,17 +1,16 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }} 1</van-checkbox>
+      <van-checkbox v-model="checkbox1">{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('disabled')">
-      <van-checkbox :value="false" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox :value="false" disabled>{{ $t('checkbox') }}</van-checkbox>
-      <van-checkbox :value="true" disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox :value="true" disabled>{{ $t('checkbox') }}</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('labelDisabled')">
-      <van-checkbox v-model="checkbox3" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
+      <van-checkbox v-model="checkbox2" label-disabled>{{ $t('checkbox') }}</van-checkbox>
-      <van-checkbox v-model="checkbox4" label-disabled>{{ $t('checkbox') }} 2</van-checkbox>
     </demo-block>
 
     <demo-block :title="$t('title3')">
@@ -27,20 +26,22 @@
     </demo-block>
 
     <demo-block :title="$t('title4')">
-      <van-checkbox-group v-model="result">
+      <van-checkbox-group v-model="result2" :max="2">
-        <van-cell-group>
+        <van-checkbox
-          <van-cell v-for="(item, index) in list" :key="index">
+          v-for="(item, index) in list"
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+          :key="index"
-          </van-cell>
+          :name="item"
-        </van-cell-group>
+        >
+          {{ $t('checkbox') }} {{ item }}
+        </van-checkbox>
       </van-checkbox-group>
     </demo-block>
 
     <demo-block :title="$t('title5')">
-      <van-checkbox-group v-model="result2" :max="max">
+      <van-checkbox-group v-model="result3">
         <van-cell-group>
-          <van-cell v-for="(item, index) in list" :key="index">
+          <van-cell v-for="(item, index) in list" :title="$t('checkbox') + item" :key="index">
-            <van-checkbox :name="item">{{ $t('checkbox') }} {{ item }}</van-checkbox>
+            <van-checkbox :name="item" />
           </van-cell>
         </van-cell-group>
       </van-checkbox-group>
@@ -53,17 +54,17 @@ export default {
   i18n: {
     'zh-CN': {
       checkbox: '复选框',
-      labelDisabled: '禁用 Checkbox 内容部分点击事件',
+      labelDisabled: '禁用内容部分点击事件',
       title3: 'Checkbox 组',
-      title4: '与 Cell 组件一起使用',
+      title4: '设置最大可选数',
-      title5: '设置最大可选数',
+      title5: '与 Cell 组件一起使用'
     },
     'en-US': {
       checkbox: 'Checkbox',
-      labelDisabled: 'Disable Checkbox Label click event',
+      labelDisabled: 'Disable Label click event',
       title3: 'Checkbox Group',
-      title4: 'Inside a Cell',
+      title4: 'Maximum amount of checked options',
-      title5: 'Maximum amount of checked options'
+      title5: 'Inside a Cell'
     }
   },
 
@@ -71,8 +72,6 @@ export default {
     return {
       checkbox1: true,
       checkbox2: true,
-      checkbox3: false,
-      checkbox4: true,
       list: [
         'a',
         'b',
@@ -80,7 +79,7 @@ export default {
       ],
       result: ['a', 'b'],
       result2: [],
-      max: 2
+      result3: []
     };
   }
 };
@@ -95,13 +94,6 @@ export default {
   .van-cell {
     .van-checkbox {
       margin: 0;
-      display: flex;
-      flex-direction: row-reverse;
-
-      &__label {
-        margin: 0;
-        flex: 1;
-      }
     }
   }
 }

docs/demos/views/list.vue

@@ -65,7 +65,7 @@ export default {
 <style lang="postcss">
 .demo-list {
   .van-cell {
-    justify-content: center;
+    text-align: center;
   }
 
   .page-desc {

docs/demos/views/radio.vue

@@ -17,8 +17,12 @@
     <demo-block :title="$t('title3')">
       <van-radio-group v-model="radio3">
         <van-cell-group>
-          <van-cell><van-radio name="1">{{ $t('radio') }}1</van-radio></van-cell>
+          <van-cell :title="$t('radio') + 1" clickable @click="radio3 = '1'">
-          <van-cell><van-radio name="2">{{ $t('radio') }}2</van-radio></van-cell>
+            <van-radio name="1" />
+          </van-cell>
+          <van-cell :title="$t('radio') + 2" clickable @click="radio3 = '2'">
+            <van-radio name="2" />
+          </van-cell>
         </van-cell-group>
       </van-radio-group>
     </demo-block>
@@ -61,16 +65,5 @@ export default {
       margin-bottom: 10px;
     }
   }
-
-  .van-cell {
-    .van-radio__input {
-      float: right;
-      position: static;
-    }
-
-    .van-radio__label {
-      margin: 0;
-    }
-  }
 }
 </style>

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/demos/views/slider.vue

@@ -1,19 +1,15 @@
 <template>
   <demo-section>
     <demo-block :title="$t('title1')">
-      <van-slider v-model="value1"/>
+      <van-slider v-model="value1" @change="onChange" />
-      <van-row>
-        <van-col span="24">
-          <van-stepper v-model="value1" />
-        </van-col>
-      </van-row>
     </demo-block>
 
     <demo-block :title="$t('title2')">
       <van-slider
         v-model="value2"
-        :min="min"
+        :min="10"
-        :max="max"
+        :max="90"
+        @change="onChange"
       />
     </demo-block>
 
@@ -24,17 +20,9 @@
     <demo-block :title="$t('title4')">
       <van-slider
         v-model="value4"
-        @change="handleChange"
+        :step="10"
-        @after-change="handleAfterChange"
+        bar-height="4px"
-      />
+        @change="onChange"
-    </demo-block>
-
-    <demo-block :title="$t('title5')">
-      <van-slider
-        v-model="value5"
-        pivot-color="#333"
-        loaded-bar-color="red"
-        bar-color="blue"
       />
     </demo-block>
   </demo-section>
@@ -45,46 +33,43 @@ export default {
   i18n: {
     'zh-CN': {
       title1: '基本用法',
-      title2: '最大最小值',
+      title2: '指定选择范围',
       title3: '禁用',
-      title4: '事件',
+      title4: '指定步长',
-      title5: '自定义样式'
+      text: '当前值：'
     },
     'en-US': {
       title1: 'Basic Usage',
-      title2: 'Max && Min',
+      title2: 'Range',
-      title3: 'Disabed',
+      title3: 'Disabled',
-      title4: 'Event',
+      title4: 'Step size',
-      title5: 'Customized style'
+      text: 'Current value: '
     }
   },
+
   data() {
     return {
       value1: 50,
       value2: 50,
       value3: 50,
-      value4: 50,
+      value4: 50
-      value5: 50,
+    };
-      min: 10,
-      max: 90
-    }
   },
+
   methods: {
-    handleChange(value) {
+    onChange(value) {
-      console.log('handleChange:', value)
+      this.$toast(this.$t('text') + value);
-    },
-    handleAfterChange(value) {
-      console.log('handleAfterChange:', value)
     }
   }
 };
 </script>
 
 <style lang="postcss">
-  .van-row {
+.demo-slider {
-    padding-top: 20px;
+  user-select: none;
-    .van-col {
+
-      text-align: center;
+  .van-slider {
+    margin: 0 15px 30px;
   }
 }
 </style>

docs/markdown/en-US/checkbox.md

@@ -12,7 +12,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 #### Basic Usage
 
 ```html
-<van-checkbox v-model="checked">Checkbox 1</van-checkbox>
+<van-checkbox v-model="checked">Checkbox</van-checkbox>
 ```
 
 ```javascript
@@ -28,7 +28,13 @@ export default {
 #### Disabled
 
 ```html
-<van-checkbox v-model="checked" disabled>Checkbox 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>Checkbox</van-checkbox>
+```
+
+#### Disable Label click event
+
+```html
+<van-checkbox v-model="checked" label-disabled>Checkbox</van-checkbox>
 ```
 
 #### Checkbox Group
@@ -76,8 +82,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
+    <van-cell v-for="item in list" :title="`Checkbox ${item}`" :key="item">
-      <van-checkbox :name="item">Checkbox {{ item }}</van-checkbox>
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>

docs/markdown/en-US/quickstart.md

@@ -68,3 +68,9 @@ Vue.use(Vant);
 ```shell
 vue init youzan/vue-cli-template-vant projectName
 ```
+
+### rem units
+Vant use `px` as size units by default，you can use tools such as `postcss-pxtorem` to transform units to `rem`.
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem)
+- [lib-flexible](https://github.com/amfe/lib-flexible)

docs/markdown/en-US/radio.md

@@ -44,8 +44,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">Radio 1</van-radio></van-cell>
+    <van-cell :title="Radio 1" clickable @click="radio = '1'">
-    <van-cell><van-radio name="2">Radio 2</van-radio></van-cell>
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="Radio 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```

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/en-US/slider.md

@@ -11,99 +11,56 @@ Vue.use(Slider);
 #### Basic Usage
 
 ```html
-<van-slider v-model="value1"/>
+<van-slider v-model="value" @change="onChange" />
-<van-row>
-  <van-col span="12">
-    <van-stepper v-model="value1" />
-  </van-col>
-</van-row>
 ```
 
 ```js
+export default {
   data() {
     return {
-    value1: 50
+      value: 50
-  }
+    };
-}
-```
-
-#### Max && Min
-
-```html
-<van-slider 
-  v-model="value2"
-  :min="min"
-  :max="max"
-/>
-```
-```js
-data() {
-  return {
-    value2: 50,
-    min: 10,
-    max: 90
-  }
-}
-```
-
-#### Disabed
-
-```html
-<van-slider v-model="value3" disabled />
-```
-
-#### Customized style
-
-```html
-<van-slider
-    v-model="value4"
-    @change="handleChange"
-    @after-change="handleAfterChange"
-  />
-```
-
-```js
-data() {
-  return {
-    value4: 50
-  }
   },
+
   methods: {
-  handleChange(value) {
+    onChange(value) {
-    console.log('handleChange:', value)
+      this.$toast('Current value：' + value);
-  },
-  handleAfterChange(value) {
-    console.log('handleAfterChange:', value)
     }
   }
+};
 ```
 
-### Customized style
+#### Range
 
 ```html
-<van-slider
+<van-slider v-model="value" :min="10" :max="90" />
-  v-model="value5"
+```
-  pivot-color="#333"
+
-  loaded-bar-color="red"
+#### Disabled
-  bar-color="blue"
+
-/>
+```html
+<van-slider v-model="value" disabled />
+```
+
+#### Step size
+
+```html
+<van-slider v-model="value" :step="10" bar-height="4px" />
 ```
 
 ### API
 
-| Attribute | Description | Type | Default | Accepted Values |
+| Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|-------------|
-| value | current value | Number  | 0 |  - |
+| value | Current value | `Number` | `0` |
-| disabled | disabled | Boolean  | false |  - |
+| disabled | Whether to disable slider | `Boolean` | `false` |
-| bar-color | bar-color | string | `#cacaca` | - |
+| max | Max value | `Number` | `100` |
-| loaded-bar-color | loaded-bar-color | string | `#4b0` | - |
+| min | Min value | `Number` | `0` |
-| pivot-color | pivot-color | string  | `#4b0` |  - |
+| step | Step size | `Number` | `1` |
-| max | max | Number | 100 | - |
+| bar-height | Height of bar | `String` | `2px` |
-| min | min | Number | 0 | - |
 
 ### Event
 
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
-| change | touchmove emit | value |
+| change | Triggered after value change | value: current rate |
-| after-change | touchend emit | value |

docs/markdown/en-US/uploader.md

@@ -43,6 +43,7 @@ You can set native properties such as `accpet`、`multiple` on Uploader, and the
 | Attribute | Description | Type | Default | Accepted Values |
 |-----------|-----------|-----------|-------------|-------------|
 | result-type | Type of file read result | `String` | `dataUrl` | `text` |
+| accept | Accepted file type | `String` | `image/*` | - |
 | disabled | Whether to disabled the upload | `Boolean` | `false` | - |
 | before-read | Hook before reading the file, return false to stop reading the file | `Function` | - | - |
 | after-read | Hook after reading the file | `Function` | - | - |

docs/markdown/zh-CN/checkbox.md

@@ -13,7 +13,7 @@ Vue.use(Checkbox).use(CheckboxGroup);
 通过`v-model`绑定 checkbox 的勾选状态
 
 ```html
-<van-checkbox v-model="checked">复选框 1</van-checkbox>
+<van-checkbox v-model="checked">复选框</van-checkbox>
 ```
 
 ```javascript
@@ -29,13 +29,15 @@ export default {
 #### 禁用状态
 
 ```html
-<van-checkbox v-model="checked" disabled>复选框 2</van-checkbox>
+<van-checkbox v-model="checked" disabled>复选框</van-checkbox>
 ```
+
 #### 禁用内容部分点击事件
 
 ```html
-<van-checkbox v-model="checked" label-disabled>复选框 3</van-checkbox>
+<van-checkbox v-model="checked" label-disabled>复选框</van-checkbox>
 ```
+
 #### Checkbox 组
 
 需要与`van-checkbox-group`一起使用，选中值是一个数组，通过`v-model`绑定在`van-checkbox-group`上，数组中的项即为选中的`Checkbox`的`name`属性设置的值
@@ -84,8 +86,8 @@ export default {
 ```html
 <van-checkbox-group v-model="result">
   <van-cell-group>
-    <van-cell v-for="(item, index) in list" :key="item">
+    <van-cell v-for="item in list" :title="`复选框 ${item}`" :key="item">
-      <van-checkbox :name="item">复选框 {{ item }}</van-checkbox>
+      <van-checkbox :name="item" />
     </van-cell>
   </van-cell-group>
 </van-checkbox-group>

docs/markdown/zh-CN/quickstart.md

@@ -69,3 +69,9 @@ Vue.use(Vant);
 ```shell
 vue init youzan/vue-cli-template-vant projectName
 ```
+
+### rem 适配
+Vant 中的组件样式默认使用`px`作为单位，如果需要使用`rem`作为单位，推荐使用以下两个工具
+
+- [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 用于将单位转化为 rem
+- [lib-flexible](https://github.com/amfe/lib-flexible) 用于设置 rem 基准值

docs/markdown/zh-CN/radio.md

@@ -46,8 +46,12 @@ export default {
 ```html
 <van-radio-group v-model="radio">
   <van-cell-group>
-    <van-cell><van-radio name="1">单选框 1</van-radio></van-cell>
+    <van-cell :title="单选框 1" clickable @click="radio = '1'">
-    <van-cell><van-radio name="2">单选框 2</van-radio></van-cell>
+      <van-radio name="1" />
+    </van-cell>
+    <van-cell :title="单选框 2" clickable @click="radio = '2'">
+      <van-radio name="2" />
+    </van-cell>
   </van-cell-group>
 </van-radio-group>
 ```

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

docs/markdown/zh-CN/slider.md

@@ -10,99 +10,56 @@ Vue.use(Slider);
 #### 基本用法
 
 ```html
-<van-slider v-model="value1"/>
+<van-slider v-model="value" @change="onChange" />
-<van-row>
-  <van-col span="12">
-    <van-stepper v-model="value1" />
-  </van-col>
-</van-row>
 ```
 
 ```js
+export default {
   data() {
     return {
-    value1: 50
+      value: 50
+    };
+  },
+
+  methods: {
+    onChange(value) {
+      this.$toast('当前值：' + value);
     }
   }
+};
 ```
 
-#### 最大最小值
+#### 指定选择范围
 
 ```html
-<van-slider 
+<van-slider v-model="value" :min="10" :max="90" />
-  v-model="value2"
-  :min="min"
-  :max="max"
-/>
-```
-```js
-data() {
-  return {
-    value2: 50,
-    min: 10,
-    max: 90
-  }
-}
 ```
 
 #### 禁用
 
 ```html
-<van-slider v-model="value3" disabled />
+<van-slider v-model="value" disabled />
 ```
 
-#### 事件
+#### 指定步长
 
 ```html
-<van-slider
+<van-slider v-model="value" :step="10" bar-height="4px" />
-    v-model="value4"
-    @change="handleChange"
-    @after-change="handleAfterChange"
-  />
-```
-
-```js
-data() {
-  return {
-    value4: 50
-  }
-},
-methods: {
-  handleChange(value) {
-    console.log('handleChange:', value)
-  },
-  handleAfterChange(value) {
-    console.log('handleAfterChange:', value)
-  }
-}
-```
-
-### 自定义样式
-
-```html
-<van-slider
-  v-model="value5"
-  pivot-color="#333"
-  loaded-bar-color="red"
-  bar-color="blue"
-/>
 ```
 
 ### API
 
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
+| 参数       | 说明      | 类型       | 默认值       |
-|-----------|-----------|-----------|-------------|-------------|
+|-----------|-----------|-----------|-------------|
-| value | 当前进度百分比 | Number  | 0 |  否 |
+| value | 当前进度百分比 | `Number` | `0` |
-| disabled | 滑块是否禁用 | Boolean  | false |  否 |
+| disabled | 是否禁用滑块 | `Boolean` | `false` |
-| bar-color | 进度条颜色 | string | `#cacaca` | 否 |
+| max | 最大值 | `Number` | `100` |
-| loaded-bar-color | 已加载条颜色 | string | `#4b0` | 否 |
+| min | 最小值 | `Number` | `0` |
-| pivot-color | 滑块颜色 | string  | `#4b0` |  否 |
+| step | 步长 | `Number` | `1` |
-| max | 最大值 | Number | 100 | - |
+| bar-height | 进度条高度 | `String` | `2px` |
-| min | 最小值 | Number | 0 | - |
 
 ### Event
 
 | 事件名 | 说明 | 参数 |
 |-----------|-----------|-----------|
-| change | 拖动时触发 | value |
+| change | 进度值改变后触发 | value: 当前进度 |
-| after-change | 拖动停止后触发 | value |

docs/markdown/zh-CN/uploader.md

@@ -41,6 +41,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 可选值 |
 |-----------|-----------|-----------|-------------|-------------|
 | result-type | 文件读取结果类型 | `String` | `dataUrl` | `text` |
+| accept | 接受的文件类型 | `String` | `image/*` | - |
 | disabled | 是否禁用图片上传 | `Boolean` | `false` | - |
 | before-read | 读取前的回调函数，返回 false 可终止文件读取 | `Function` | - | - |
 | after-read | 读取完成后的回调函数 | `Function` | - | - |

docs/src/doc.config.js

@@ -136,6 +136,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress - 进度条'
               },
+              {
+                path: '/slider',
+                title: 'Slider - 滑块'
+              },
               {
                 path: '/stepper',
                 title: 'Stepper - 步进器'
@@ -148,10 +152,6 @@ module.exports = {
                 path: '/swipe',
                 title: 'Swipe - 轮播'
               },
-              {
-                path: '/slider',
-                title: 'Slider - 滑块'
-              },
               {
                 path: '/tab',
                 title: 'Tab - 标签页'
@@ -434,6 +434,10 @@ module.exports = {
                 path: '/progress',
                 title: 'Progress'
               },
+              {
+                path: '/slider',
+                title: 'Slider'
+              },
               {
                 path: '/stepper',
                 title: 'Stepper'
@@ -446,10 +450,6 @@ module.exports = {
                 path: '/swipe',
                 title: 'Swipe'
               },
-              {
-                path: '/slider',
-                title: 'Slider'
-              },
               {
                 path: '/tab',
                 title: 'Tab'

package.json

@@ -12,6 +12,10 @@
     "packages",
     "types"
   ],
+  "sideEffects": [
+    "es/**/style/*",
+    "lib/**/style/*"
+  ],
   "scripts": {
     "bootstrap": "yarn || npm i && cd ./packages/vant-css/ && yarn || npm i && cd ../../",
     "dev": "npm run build:file && webpack-dev-server --inline --config build/webpack.config.dev.js",

packages/cell-group/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="van-cell-group" :class="{ 'van-hairline--top-bottom': border }">
+  <div :class="[b(), { 'van-hairline--top-bottom': border }]">
     <slot />
   </div>
 </template>

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
-      <div class="van-cell-swipe__left" @click.stop="onClick('left')" v-if="leftWidth">
+      :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>

packages/cell/index.vue

@@ -1,37 +1,34 @@
 <template>
   <div
-    class="van-cell"
+    :class="[
-    :class="{
+      b({
-      'van-hairline': border,
+        center,
-      'van-cell--center': center,
+        required,
-      'van-cell--required': required,
+        clickable: isLink || clickable
-      'van-cell--clickable': isLink || clickable
+      }),
-    }"
+      { 'van-hairline': border }
+    ]"
     @click="onClick"
   >
     <slot name="icon">
-      <icon v-if="icon" class="van-cell__left-icon" :name="icon" />
+      <icon v-if="icon" :class="b('left-icon')" :name="icon" />
     </slot>
-    <div class="van-cell__title" v-if="title || $slots.title">
+    <div v-if="title || $slots.title" :class="b('title')">
       <slot name="title">
         <span v-text="title" />
-        <div class="van-cell__label" v-if="label" v-text="label" />
+        <div v-if="label" v-text="label" :class="b('label')" />
       </slot>
     </div>
     <div
-      class="van-cell__value"
       v-if="value || $slots.default"
-      :class="{
+      :class="b('value', { alone: !$slots.title && !title })"
-        'van-cell__value--link': isLink,
-        'van-cell__value--alone': !$slots.title && !title && !label
-      }"
     >
       <slot>
         <span v-text="value" />
       </slot>
     </div>
     <slot name="right-icon">
-      <icon name="arrow" class="van-cell__right-icon" v-if="isLink" />
+      <icon v-if="isLink" :class="b('right-icon')" name="arrow" />
     </slot>
     <slot name="extra" />
   </div>

packages/checkbox-group/index.vue

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

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

@@ -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="b('hover')" :style="hoverStyle" :d="path" />
-      <path class="van-circle__layer" :style="layerStyle" :d="path" />
+      <path :class="b('layer')" :style="layerStyle" :d="path" />
     </svg>
     <slot>
-      <div class="van-circle__text">{{ text }}</div>
+      <div :class="b('text')">{{ text }}</div>
     </slot>
   </div>
 </template>

packages/collapse-item/index.vue

@@ -1,15 +1,14 @@
 <template>
   <div
-    class="van-collapse-item"
+    :class="[
-    :class="{
+      b({ expanded }),
-      'van-hairline--top': index,
+      { 'van-hairline--top': index }
-      'van-collapse-item--expanded': expanded
+    ]"
-    }"
   >
-    <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>

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>

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="b([type, { uneditable: !editable }])" @click="onClick">
-    <div class="van-contact-card__content">
+    <div :class="b('content')">
       <template v-if="type === 'add'">
-        <icon class="van-contact-card__icon" name="add2" />
+        <icon :class="b('icon')" name="add2" />
-        <div class="van-contact-card__text">{{ addText || $t('addText') }}</div>
+        <div :class="b('text')">{{ addText || $t('addText') }}</div>
       </template>
       <template v-else-if="type === 'edit'">
-        <icon class="van-contact-card__icon" name="contact" />
+        <icon :class="b('icon')" name="contact" />
-        <div class="van-contact-card__text">
+        <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>
 

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>

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="b('text')">{{ $t('contact') }}：{{ item.name }}</p>
-            <p class="van-contact-list__text">{{ $t('tel') }}：{{ item.tel }}</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')"
     />

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>

packages/coupon-list/Item.vue

@@ -1,17 +1,17 @@
 <template>
-  <div class="van-coupon-item" :class="{ 'van-coupon-item--disabled': disabled }">
+  <div :class="b({ disabled })">
-    <div class="van-coupon-item__head">
+    <div :class="b('head')">
-      <div class="van-coupon-item__lines" />
+      <div :class="b('lines')" />
-      <div class="van-coupon-item__gradient">
+      <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);
     }

packages/coupon-list/index.vue

@@ -1,8 +1,9 @@
 <template>
-  <div class="van-coupon-list">
+  <div :class="b()">
-    <cell-group class="van-coupon-list__top" v-if="showExchangeBar">
+    <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>

packages/dialog/dialog.vue

@@ -1,18 +1,18 @@
 <template>
   <transition name="van-dialog-bounce">
-    <div class="van-dialog" v-show="value">
+    <div v-show="value" :class="b()">
-      <div class="van-dialog__header" v-if="title" v-text="title" />
+      <div v-if="title" v-text="title" :class="b('header')" />
-      <div class="van-dialog__content van-hairline">
+      <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="[b('confirm'), { 'van-hairline--left': showCancelButton && showConfirmButton }]"
-          :class="{ 'van-hairline--left': showCancelButton && showConfirmButton }"
           @click="handleAction('confirm')"
         >
           {{ confirmButtonText || $t('confirm') }}

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/mixins/bem.js

@@ -39,7 +39,7 @@ export default {
       }
       el = join(name, el, ELEMENT);
 
-      return mods ? [el, prefix(name, mods)] : el;
+      return mods ? [el, prefix(el, mods)] : el;
     }
   }
 };

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/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-hairline"
-      :class="{ 'van-pagination--disabled': value === 1 }"
+      :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-hairline"
-      :class="{ 'van-pagination--active': page.active }"
+      :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-hairline"
-      :class="{ 'van-pagination--disabled': value === computedPageCount }"
+      :class="[b('item', { disabled: value === computedPageCount }), b('next')]"
       @click="selectPage(value + 1)"
     >
       {{ nextText || $t('next') }}

packages/panel/index.vue

@@ -1,19 +1,15 @@
 <template>
-  <div class="van-panel van-hairline--top-bottom">
+  <cell-group :class="b()">
-    <div class="van-panel__header van-hairline--bottom">
     <slot name="header">
-        <div class="van-panel__title" v-text="title" />
+      <cell :class="b('header')" :title="title" :label="desc" :value="status" />
-        <span class="van-panel__desc" v-if="desc" v-text="desc" />
-        <span class="van-panel__status" v-if="status" v-text="status" />
     </slot>
-    </div>
+    <div :class="b('content')">
-    <div class="van-panel__content">
       <slot />
     </div>
-    <div class="van-panel__footer van-hairline--top" v-if="$slots.footer">
+    <div v-if="$slots.footer" :class="b('footer')" class="van-hairline--top">
       <slot name="footer" />
     </div>
-  </div>
+  </cell-group>
 </template>
 
 <script>

packages/password-input/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="van-password-input">
+  <div :class="b()">
-    <ul class="van-password-input__security van-hairline--surround" @touchstart.stop="$emit('focus')">
+    <ul :class="b('security')" class="van-hairline--surround" @touchstart.stop="$emit('focus')">
       <li v-for="visibility in points" class="van-hairline">
         <i :style="`visibility: ${visibility}`" />
       </li>
@@ -8,7 +8,7 @@
     <div
       v-if="errorInfo || info"
       v-text="errorInfo || info"
-      :class="errorInfo ? 'van-password-input__error-info' : 'van-password-input__info'"
+      :class="b(errorInfo ? 'error-info' : 'info')"
     />
   </div>
 </template>

packages/picker/PickerColumn.vue

@@ -1,8 +1,7 @@
 
 <template>
   <div
-    class="van-picker-column"
+    :class="[b(), className]"
-    :class="className"
     :style="columnStyle"
     @touchstart="onTouchStart"
     @touchmove.prevent="onTouchMove"
@@ -14,10 +13,10 @@
         v-for="(option, index) in options"
         v-text="getOptionText(option)"
         class="van-ellipsis"
-        :class="{
+        :class="b('item', {
-          'van-picker-column--disabled': isDisabled(option),
+          disabled: isDisabled(option),
-          'van-picker-column--selected': index === currentIndex
+          selected: index === currentIndex
-        }"
+        })"
         @click="setIndex(index, true)"
       />
     </ul>

packages/picker/index.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="van-picker">
+  <div :class="b()">
-    <div class="van-picker__toolbar van-hairline--top-bottom" v-if="showToolbar">
+    <div :class="b('toolbar')" class="van-hairline--top-bottom" v-if="showToolbar">
       <slot>
-        <div class="van-picker__cancel" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
+        <div :class="b('cancel')" @click="emit('cancel')">{{ cancelButtonText || $t('cancel') }}</div>
-        <div class="van-picker__title van-ellipsis" v-if="title" v-text="title" />
+        <div :class="b('title')" class="van-ellipsis" v-if="title" v-text="title" />
-        <div class="van-picker__confirm" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
+        <div :class="b('confirm')" @click="emit('confirm')">{{ confirmButtonText || $t('confirm') }}</div>
       </slot>
     </div>
-    <div v-if="loading" class="van-picker__loading">
+    <div v-if="loading" :class="b('loading')">
       <loading />
     </div>
-    <div class="van-picker__columns" :style="columnsStyle" @touchmove.prevent>
+    <div :class="b('columns')" :style="columnsStyle" @touchmove.prevent>
       <picker-column
         v-for="(item, index) in currentColumns"
         :key="index"
@@ -22,7 +22,7 @@
         :visible-item-count="visibleItemCount"
         @change="onChange(index)"
       />
-      <div class="van-picker__frame van-hairline--top-bottom" :style="frameStyle" />
+      <div :class="b('frame')" class="van-hairline--top-bottom" :style="frameStyle" />
     </div>
   </div>
 </template>

packages/popup/index.vue

@@ -1,6 +1,6 @@
 <template>
   <transition :name="currentTransition">
-    <div v-show="value" class="van-popup" :class="{ [`van-popup--${position}`]: position }">
+    <div v-show="value" :class="b({ [position]: position })">
       <slot />
     </div>
   </transition>
@@ -31,12 +31,10 @@ export default create({
     }
   },
 
-  data() {
+  computed: {
-    const transition = this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
+    currentTransition() {
-    return {
+      return this.transition || (this.position === '' ? 'van-fade' : `popup-slide-${this.position}`);
-      currentValue: false,
+    }
-      currentTransition: transition
-    };
   }
 });
 </script>

packages/progress/index.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="van-progress">
+  <div :class="b()">
-    <span class="van-progress__portion" :style="portionStyle" />
+    <span :class="b('portion')" :style="portionStyle" />
-    <span class="van-progress__pivot" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
+    <span :class="b('pivot')" v-show="showPivot" :style="pivotStyle">{{ pivotText }}</span>
   </div>
 </template>
 

packages/pull-refresh/index.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="van-pull-refresh">
+  <div :class="b()">
     <div
-      class="van-pull-refresh__track"
+      :class="b('track')"
       :style="style"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
       @touchcancel="onTouchEnd"
     >
-      <div class="van-pull-refresh__head">
+      <div :class="b('head')">
-        <slot name="normal" v-if="status === 'normal'"/>
+        <slot v-if="status === 'normal'" name="normal" />
-        <slot name="pulling" v-if="status === 'pulling'">
+        <slot v-if="status === 'pulling'" name="pulling">
-          <span class="van-pull-refresh__text">{{ pullingText || $t('pulling') }}</span>
+          <span :class="b('text')">{{ pullingText || $t('pulling') }}</span>
         </slot>
-        <slot name="loosing" v-if="status === 'loosing'">
+        <slot v-if="status === 'loosing'" name="loosing">
-          <span class="van-pull-refresh__text">{{ loosingText || $t('loosing') }}</span>
+          <span :class="b('text')">{{ loosingText || $t('loosing') }}</span>
         </slot>
-        <slot name="loading" v-if="status === 'loading'">
+        <slot v-if="status === 'loading'" name="loading">
-          <div class="van-pull-refresh__loading">
+          <div :class="b('loading')">
             <loading />
             <span>{{ loadingText || $t('loadingTip') }}</span>
           </div>

packages/radio-group/index.vue

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

packages/radio/index.vue

@@ -1,20 +1,16 @@
 <template>
-  <div
+  <div :class="b({ disabled: isDisabled })" @click="$emit('click')">
-    class="van-radio"
+    <span :class="b('input')">
-    :class="{ 'van-radio--disabled': isDisabled }"
-    @click="$emit('click')"
-  >
-    <span class="van-radio__input">
       <input
         :value="name"
         v-model="currentValue"
         type="radio"
-        class="van-radio__control"
+        :class="b('control')"
         :disabled="isDisabled"
       >
       <icon :name="currentValue === name ? 'checked' : 'check'" />
     </span>
-    <span class="van-radio__label" @click="onClickLabel">
+    <span v-if="$slots.default" :class="b('label')" @click="onClickLabel">
       <slot />
     </span>
   </div>

packages/row/index.vue

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

packages/search/index.vue

@@ -1,23 +1,23 @@
 <template>
   <div
-    class="van-search"
+    :class="b({ 'show-action': showAction })"
-    :class="{ 'van-search--show-action': showAction }"
+    :style="{ 'background-color': background }"
-    :style="{ 'background-color': background }">
+  >
-    <div class="van-search__input-wrap" v-clickoutside="onClickoutside">
+    <div :class="b('wrap')" v-clickoutside="onClickoutside">
       <icon name="search" />
       <input
         v-bind="$attrs"
         v-on="listeners"
         v-refocus="focusStatus"
         type="search"
-        class="van-search__input"
+        :class="b('input')"
         :value="value"
       >
       <icon name="clear" v-show="isFocus && value" @click="onClean" />
     </div>
-    <div class="van-search__action" v-if="showAction">
+    <div v-if="showAction" :class="b('action')" >
       <slot name="action">
-        <div class="van-search__action-text" @click="onBack">{{ $t('cancel') }}</div>
+        <div :class="b('cancel')" @click="onBack">{{ $t('cancel') }}</div>
       </slot>
     </div>
   </div>

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="b()" class="van-hairline--bottom">
-    <div class="van-sku-header__img-wrap">
+    <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="b()">
-    <div class="van-sku-row__title">{{ skuRow.k }}：</div>
+    <div :class="b('title')">{{ skuRow.k }}：</div>
     <slot />
   </div>
 </template>

packages/slider/index.vue

@@ -1,22 +1,8 @@
 <template>
-  <div
+  <div :class="b({ disabled })" @click.stop="onClick">
-    class="van-slider"
+    <div :class="b('bar')" :style="barStyle">
-    :class="{ 'van-slider--disabled': disabled }"
-  >
-    <div
-      class="van-slider__bar"
-      ref="bar"
-      :style="barStyle"
-      @click.stop="onSliderClicked"
-    >
       <span
-        class="van-slider__finished-portion"
+        :class="b('button')"
-        :style="finishedStyle"
-      />
-      <span
-        class="van-slider__pivot"
-        ref="pivot"
-        :style="pivotStyle"
         @touchstart="onTouchStart"
         @touchmove.prevent.stop="onTouchMove"
         @touchend="onTouchEnd"
@@ -25,145 +11,90 @@
     </div>
   </div>
 </template>
-<script>
 
+<script>
 import create from '../utils/create';
 import Touch from '../mixins/touch';
 
-const DEFAULT_COLOR = '#4b0';
-const DEFAULT_BG = '#cacaca';
-
 export default create({
   name: 'slider',
+
   mixins: [Touch],
 
   props: {
+    disabled: Boolean,
     max: {
       type: Number,
       default: 100
     },
-
     min: {
       type: Number,
       default: 0
     },
-
+    step: {
+      type: Number,
+      default: 1
+    },
     value: {
       type: Number,
-      default: 0,
+      default: 0
-      required: true
     },
-
+    barHeight: {
-    disabled: Boolean,
-
-    pivotColor: {
       type: String,
-      default: DEFAULT_COLOR
+      default: '2px'
-    },
-
-    barColor: {
-      type: String,
-      default: DEFAULT_BG
-    },
-
-    loadedBarColor: {
-      type: String,
-      default: DEFAULT_COLOR
     }
   },
 
-  data() {
-    return {
-      pivotOffset: 0
-    };
-  },
-
   computed: {
-    sliderWidth() {
-      const rect = this.$refs.bar.getBoundingClientRect();
-      return rect['width'];
-    },
-
     barStyle() {
       return {
-        backgroundColor: this.barColor
+        width: this.format(this.value) + '%',
-      };
+        height: this.barHeight
-    },
-
-    finishedStyle() {
-      return {
-        backgroundColor: this.loadedBarColor,
-        width: this.format(this.value) + '%'
-      };
-    },
-
-    pivotStyle() {
-      return {
-        backgroundColor: this.pivotColor,
-        left: this.format(this.value) + '%',
-        marginLeft: `-${this.pivotOffset}px`
       };
     }
   },
 
-  mounted() {
-    this.pivotOffset = parseInt(this.$refs.pivot.getBoundingClientRect().width / 2);
-  },
-
   methods: {
     onTouchStart(event) {
       if (this.disabled) return;
 
-      this.draging = true;
       this.touchStart(event);
       this.startValue = this.format(this.value);
     },
 
     onTouchMove(event) {
-      if (this.draging) {
+      if (this.disabled) return;
+
       this.touchMove(event);
-        const diff = this.deltaX / this.sliderWidth * 100;
+      const rect = this.$el.getBoundingClientRect();
-        this.newValue = this.startValue + diff;
+      const diff = this.deltaX / rect.width * 100;
-        this.updateValue(this.newValue);
+      this.updateValue(this.startValue + diff);
-      }
     },
 
     onTouchEnd() {
-      if (this.draging) {
+      if (this.disabled) return;
-        this.$nextTick(() => {
+      this.updateValue(this.value, true);
-          this.draging = false;
-          this.updateValue(this.newValue, true);
-        });
-      }
     },
 
-    onSliderClicked(e) {
+    onClick(event) {
-      if (this.disabled || this.draging) return;
-
-      const sliderRect = this.$refs.bar.getBoundingClientRect();
-      const sliderOffset = sliderRect.left;
-      this.newValue = Math.round((e.clientX - sliderOffset) / this.sliderWidth * 100);
-      this.updateValue(this.newValue, true);
-    },
-
-    updateValue(value, isFinished) {
       if (this.disabled) return;
 
+      const rect = this.$el.getBoundingClientRect();
+      const value = (event.clientX - rect.left) / rect.width * 100;
+      this.updateValue(value, true);
+    },
+
+    updateValue(value, end) {
       value = this.format(value);
-      this.$emit('change', value);
       this.$emit('input', value);
 
-      if (isFinished) {
+      if (end) {
-        this.$emit('after-change', value);
+        this.$emit('change', value);
       }
     },
 
     format(value) {
-      return Math.round(this.range(value));
+      return (Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step);
-    },
-
-    range(value) {
-      return Math.max(this.min, Math.min(value, this.max));
     }
   }
 });

packages/step/index.vue

@@ -1,13 +1,13 @@
 <template>
-  <div class="van-step van-hairline" :class="[`van-step--${$parent.direction}`, { [`van-step--${status}`]: status }]">
+  <div class="van-hairline" :class="b([$parent.direction, { [status]: status }])">
-    <div class="van-step__circle-container">
+    <div :class="b('title')" :style="titleStyle">
-      <i class="van-step__circle" v-if="status !== 'process'" />
-      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
-    </div>
-    <div class="van-step__title" :style="titleStyle">
       <slot />
     </div>
-    <div class="van-step__line" />
+    <div :class="b('circle-container')">
+      <i :class="b('circle')" v-if="status !== 'process'" />
+      <icon v-else name="checked" :style="{ color: $parent.activeColor }" />
+    </div>
+    <div :class="b('line')" />
   </div>
 </template>
 

packages/stepper/index.vue

@@ -1,20 +1,18 @@
 <template>
-  <div class="van-stepper" :class="{ 'van-stepper--disabled': disabled }">
+  <div :class="b({ disabled })">
     <button
-      class="van-stepper__stepper van-stepper__minus"
+      :class="b('minus', { disabled: minusDisabled })"
-      :class="{ 'van-stepper__minus--disabled': isMinusDisabled }"
       @click="onChange('minus')"
     />
     <input
       type="number"
-      class="van-stepper__input"
+      :class="b('input')"
       :value="currentValue"
       :disabled="disabled || disableInput"
       @input="onInput"
     >
     <button
-      class="van-stepper__stepper van-stepper__plus"
+      :class="b('plus', { disabled: plusDisabled })"
-      :class="{ 'van-stepper__plus--disabled': isPlusDisabled }"
       @click="onChange('plus')"
     />
   </div>
@@ -62,14 +60,14 @@ export default create({
   },
 
   computed: {
-    isMinusDisabled() {
+    minusDisabled() {
       const min = +this.min;
       const step = +this.step;
       const currentValue = +this.currentValue;
       return min === currentValue || (currentValue - step) < min || this.disabled;
     },
 
-    isPlusDisabled() {
+    plusDisabled() {
       const max = +this.max;
       const step = +this.step;
       const currentValue = +this.currentValue;
@@ -108,7 +106,7 @@ export default create({
     },
 
     onChange(type) {
-      if ((this.isMinusDisabled && type === 'minus') || (this.isPlusDisabled && type === 'plus')) {
+      if ((this.minusDisabled && type === 'minus') || (this.plusDisabled && type === 'plus')) {
         this.$emit('overlimit', type);
         return;
       }

packages/steps/index.vue

@@ -1,18 +1,18 @@
 <template>
-  <div class="van-steps" :class="`van-steps--${direction}`">
+  <div :class="b([direction])">
-    <div class="van-steps__status" v-if="title || description">
+    <div v-if="title || description" :class="b('status')">
-      <div class="van-steps__icon" v-if="icon || $slots.icon">
+      <div v-if="icon || $slots.icon" :class="b('icon')">
         <slot name="icon">
           <icon :name="icon" :class="iconClass" />
         </slot>
       </div>
-      <div class="van-steps__message">
+      <div :class="b('message')">
-        <div class="van-steps__title" v-text="title" />
+        <div :class="b('title')" v-text="title" />
-        <div class="van-steps__desc van-ellipsis" v-text="description" />
+        <div :class="b('desc')" class="van-ellipsis" v-text="description" />
       </div>
       <slot name="message-extra" />
     </div>
-    <div class="van-steps__items" :class="{ 'van-steps__items--alone': !title && !description }">
+    <div :class="b('items', { alone: !title && !description })">
       <slot />
     </div>
   </div>

packages/submit-bar/index.vue

@@ -1,15 +1,15 @@
 <template>
-  <div class="van-submit-bar">
+  <div :class="b()">
-    <div class="van-submit-bar__tip" v-show="tip || $slots.tip">
+    <div :class="b('tip')" v-show="tip || $slots.tip">
       {{ tip }}<slot name="tip" />
     </div>
-    <div class="van-submit-bar__bar">
+    <div :class="b('bar')">
       <slot />
-      <div class="van-submit-bar__price">
+      <div :class="b('price')">
         <template v-if="hasPrice">
           <span>{{ label || $t('label') }}</span>
-          <span class="van-submit-bar__price-interger">{{ currency }}{{ priceInterger }}.</span>
+          <span :class="b('price-interger')">{{ currency }}{{ priceInterger }}.</span>
-          <span class="van-submit-bar__price-decimal">{{ priceDecimal }}</span>
+          <span :class="b('price-decimal')">{{ priceDecimal }}</span>
         </template>
       </div>
       <van-button :type="buttonType" :disabled="disabled" :loading="loading" @click="onSubmit">

packages/swipe-item/index.vue

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

packages/swipe/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <div class="van-swipe">
+  <div :class="b()">
     <div
       v-if="count > 1"
       :style="trackStyle"
-      class="van-swipe__track"
+      :class="b('track')"
       @touchstart="onTouchStart"
       @touchmove="onTouchMove"
       @touchend="onTouchEnd"
@@ -12,11 +12,14 @@
     >
       <slot />
     </div>
-    <div v-else class="van-swipe__track">
+    <div v-else :class="b('track')">
       <slot />
     </div>
-    <div class="van-swipe__indicators" v-if="showIndicators && count > 1">
+    <div
-      <i v-for="index in count" :class="{ 'van-swipe__indicator--active': index - 1 === activeIndicator }" />
+      v-if="showIndicators && count > 1"
+      :class="b('indicators')"
+    >
+      <i v-for="index in count" :class="b('indicator', { active: index - 1 === activeIndicator })" />
     </div>
   </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="b({
-    :class="[{
+      on: value,
-      'van-switch--on': value,
+      disabled
-      'van-switch--disabled': disabled
+    })"
-    }]"
     :style="style"
     @click="onClick"
   >
-    <div class="van-switch__node">
+    <div :class="b('node')">
-      <loading v-if="loading" class="van-switch__loading" />
+      <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="b({ active })" @click="onClick">
-    <div class="van-tabbar-item__icon" :class="{ 'van-tabbar-item__icon-dot': dot }">
+    <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="[
-      :class="[`van-tabs__wrap--${position}`, {
+        b('wrap', [position, { scrollable }]),
-        'van-tabs--scrollable': scrollable,
+        { 'van-hairline--top-bottom': type === 'line' }
-        'van-hairline--top-bottom': type === 'line'
+      ]"
-      }]"
     >
-      <div class="van-tabs__nav" :class="`van-tabs__nav--${type}`" ref="nav">
+      <div :class="b('nav', [type])" ref="nav">
-        <div v-if="type === 'line'" class="van-tabs__nav-bar" :style="navBarStyle" />
+        <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-hairline--surround"
-    :class="{
+    :class="b({
-      [`van-tag--${type}`]: type,
+      mark,
-      'van-tag--plain': plain,
+      plain,
-      'van-tag--mark': mark
+      [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" />
+        <icon v-else :class="b('icon')" :name="type" />
-        <div v-if="hasMessage" class="van-toast__text">{{ message }}</div>
+        <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="b()" :style="{ height: mainHeight + 'px' }">
-    <div class="van-tree-select__nav">
+    <div :class="b('nav')">
       <div
         v-for="(item, index) in items"
-        class="van-tree-select__nitem van-ellipsis"
+        class="van-ellipsis"
-        :class="{ 'van-tree-select__nitem--active': mainActiveIndex === index }"
+        :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-ellipsis"
-        :class="{ 'van-tree-select__item--active': activeId === item.id }"
+        :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/uploader/index.vue

@@ -1,11 +1,12 @@
 <template>
-  <div class="van-uploader">
+  <div :class="b()">
     <slot />
     <input
+      v-bind="$attrs"
       ref="input"
       type="file"
-      class="van-uploader__input"
+      :class="b('input')"
-      v-bind="$attrs"
+      :accept="accept"
       :disabled="disabled"
       @change="onChange"
     >
@@ -24,6 +25,10 @@ export default create({
     disabled: Boolean,
     beforeRead: Function,
     afterRead: Function,
+    accept: {
+      type: String,
+      default: 'image/*'
+    },
     resultType: {
       type: String,
       default: 'dataUrl'

packages/vant-css/src/address-edit.css

@@ -11,7 +11,7 @@
 
   &__area {
     .van-cell__title {
-      width: 90px;
+      max-width: 90px;
     }
 
     .van-cell__value {

packages/vant-css/src/cell.css

@@ -1,7 +1,6 @@
 @import './common/var.css';
 
 .van-cell {
-  width: 100%;
   display: flex;
   padding: 10px 15px;
   box-sizing: border-box;
@@ -24,31 +23,38 @@
     background-color: $white;
   }
 
-  &__left-icon {
-    font-size: 16px;
-    line-height: 1.5;
-    margin-right: 5px;
-  }
-
   &__label {
     font-size: 12px;
     line-height: 1.2;
     color: $gray-darker;
   }
 
+  &__title,
   &__value {
     flex: 1;
+  }
+
+  &__value {
+    overflow: hidden;
     text-align: right;
     vertical-align: middle;
-    overflow: hidden;
 
     &--alone {
       text-align: left;
     }
-
-    &--link {
-      padding-right: 15px;
   }
+  
+  &__left-icon {
+    font-size: 16px;
+    line-height: 24px;
+    margin-right: 5px;
+  }
+
+  &__right-icon {
+    color: $gray-dark;
+    font-size: 12px;
+    line-height: 24px;
+    margin-left: 5px;
   }
 
   &--clickable {
@@ -72,13 +78,4 @@
   &--center {
     align-items: center;
   }
-
-  &__right-icon {
-    position: absolute;
-    top: 50%;
-    right: 15px;
-    transform: translateY(-50%);
-    color: $gray-dark;
-    font-size: 12px;
-  }
 }

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

packages/vant-css/src/dialog.css

@@ -36,7 +36,7 @@
   &__footer {
     overflow: hidden;
 
-    &.is-twobtn {
+    &--buttons {
       display: flex;
 
       .van-button {

packages/vant-css/src/field.css

@@ -2,7 +2,7 @@
 
 .van-field {
   .van-cell__title {
-    min-width: 90px;
+    max-width: 90px;
   }
 
   .van-cell__value {

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;

packages/vant-css/src/pagination.css

@@ -28,31 +28,27 @@
     &:last-child::after {
       border-right-width: 1px;
     }
-  }
 
-  &__prev,
+    &--disabled,
-  &__next {
+    &--disabled:active {
-    &.van-pagination__item {
-      padding: 0 5px;
-    }
-  }
-
-  &__page {
-    flex-grow: 0;
-
-    &.van-pagination--active {
-      background-color: $blue;
-      color: $white;
-    }
-  }
-
-  &--disabled {
-
-    &.van-pagination__item {
       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 {
 
+  &--simple {
     .van-pagination__prev,
     .van-pagination__next {
-
+      &::after {
-    &.van-pagination__item::after {
         border-width: 1px;
       }
     }
   }
+}

packages/vant-css/src/panel.css

@@ -4,26 +4,10 @@
   background: $white;
 
   &__header {
-    padding: 10px 15px;
+    .van-cell__value {
-  }
-
-  &__title {
-    font-size: 14px;
-    color: $text-color;
-  }
-
-  &__desc {
-    font-size: 12px;
-    color: $gray-darker;
-  }
-
-  &__status {
-    font-size: 14px;
-    position: absolute;
-    top: 10px;
-    right: 15px;
       color: $red;
     }
+  }
 
   &__footer {
     padding: 10px 15px;

packages/vant-css/src/picker.css

@@ -5,6 +5,7 @@
   user-select: none;
   position: relative;
   background-color: $white;
+  -webkit-text-size-adjust: 100%; /* avoid iOS text size adjust */
 
   &__toolbar {
     display: flex;
@@ -64,17 +65,17 @@
     font-size: 17px;
     text-align: center;
 
-    li {
+    &__item {
       padding: 0 5px;
       color: $gray-darker;
-    }
 
-    li&--selected {
+      &--selected {
         color: $black;
       }
 
-    li&--disabled {
+      &--disabled {
         opacity: .3;
       }
     }
   }
+}

packages/vant-css/src/search.css

@@ -10,7 +10,7 @@
     padding-right: 0;
   }
 
-  &__input-wrap {
+  &__wrap {
     position: relative;
     flex: 1;
     height: 34px;
@@ -49,7 +49,7 @@
     letter-spacing: 1px;
   }
 
-  &__action-text {
+  &__cancel {
     padding: 0 10px;
     color: $green;
 

packages/vant-css/src/sku.css

@@ -164,7 +164,7 @@
 
     &__image-cell {
       .van-cell__title {
-        width: 90px;
+        max-width: 90px;
       }
       .van-cell__value {
         text-align: left;

packages/vant-css/src/slider.css

@@ -1,41 +1,29 @@
 @import './common/var.css';
 
-$c-slider-background: #cacaca;
-$c-pivot-border: #fff;
-
 .van-slider {
-  &--disabled {
+  position: relative;
-    opacity: .3;
+  border-radius: 999px;
-    .van-slider__pivot {
+  background-color: $border-color;
-      cursor: not-allowed;
-    }
-  }
 
   &__bar {
     position: relative;
-    margin: 0 15px;
+    border-radius: inherit;
-    height: 4px;
+    background-color: $blue;
-    border-radius: 5px;
-    background: $c-slider-background;
   }
 
-  &__loaded-portion,
+  &__button {
-  &__finished-portion {
-    border-radius: 5px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-  }
-
-  &__pivot {
     position: absolute;
     top: 50%;
-    width: 16px;
+    right: 0;
-    height: 16px;
+    width: 20px;
-    border: 3px solid $c-pivot-border;
+    height: 20px;
-    box-shadow: 0 1px 4px;
     border-radius: 50%;
-    background-color: $c-slider-background;
+    background-color: $white;
-    transform: translate3d(0, -50%, 0);
+    transform: translate3d(50%, -50%, 0);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
+  }
+
+  &--disabled {
+    opacity: .3;
   }
 }

packages/vant-css/src/stepper.css

@@ -11,7 +11,8 @@
     }
   }
 
-  &__stepper {
+  &__minus,
+  &__plus {
     width: 40px;
     height: 30px;
     box-sizing: border-box;
@@ -42,10 +43,7 @@
       bottom: 0;
       background-color: #6c6c6c;
     }
-  }
 
-  &__minus,
-  &__plus {
     &:active {
       background-color: $active-color;
     }

packages/vant-css/src/swipe.css

@@ -22,23 +22,22 @@ $van-swipe-indicator: 6px;
     position: absolute;
     height: $van-swipe-indicator;
     transform: translate3d(-50%, 0, 0);
+  }
 
-    > i {
+  &__indicator {
     border-radius: 100%;
     vertical-align: top;
     display: inline-block;
     background-color: $gray-dark;
     width: $van-swipe-indicator;
     height: $van-swipe-indicator;
+
     &:not(:last-child) {
       margin-right: $van-swipe-indicator;
     }
-    }
   
-    .van-swipe__indicator {
     &--active {
       background-color: $orange;
     }
   }
 }
-}

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/checkbox.spec.js

@@ -165,7 +165,7 @@ describe('Checkbox', () => {
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
     const eventStub = sinon.stub(wrapper.vm, '$emit');
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     wrapper.update();
@@ -189,7 +189,7 @@ describe('Checkbox', () => {
     expect(wrapper.vm.currentValue).to.be.false;
     expect(wrapper.vm.isDisabled).to.be.true;
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     expect(wrapper.vm.currentValue).to.be.false;
@@ -206,7 +206,7 @@ describe('Checkbox', () => {
     expect(wrapper.hasClass('van-checkbox')).to.be.true;
     expect(wrapper.vm.currentValue).to.be.false;
 
-    const checkboxLabel = wrapper.find('.van-checkbox__label')[0];
+    const checkboxLabel = wrapper.find('.van-checkbox__icon')[0];
     checkboxLabel.trigger('click');
 
     expect(wrapper.vm.currentValue).to.be.false;

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