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

example/pages/badge/index.wxml

@@ -4,7 +4,7 @@
       <van-badge title="标签名称" />
       <van-badge title="标签名称" info="8" />
       <van-badge title="标签名称" info="99" />
-      <van-badge title="标签名称" info="199" />
+      <van-badge title="标签名称" info="99+" />
     </van-badge-group>
   </view>
 </demo-block>

example/pages/collapse/index.wxml

@@ -1,37 +1,31 @@
 <demo-block title="基础用法">
   <van-collapse value="{{ active1 }}" data-key="active1" bind:change="onChange">
-    <van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
+    <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
-    <van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
+    <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
-    <van-collapse-item
+    <van-collapse-item title="{{ title3 }}" disabled>{{ content3 }}</van-collapse-item>
-      title="{{ title3 }}"
-      content-class="van-collapse-item__content"
-      disabled
-    >
-      {{ content3 }}
-    </van-collapse-item>
   </van-collapse>
 </demo-block>
 
 <demo-block title="手风琴">
   <van-collapse value="{{ active2 }}" data-key="active2" accordion bind:change="onChange">
-    <van-collapse-item title="{{ title1 }}" content-class="van-collapse-item__content">{{ content1 }}</van-collapse-item>
+    <van-collapse-item title="{{ title1 }}">{{ content1 }}</van-collapse-item>
-    <van-collapse-item title="{{ title2 }}" content-class="van-collapse-item__content">{{ content2 }}</van-collapse-item>
+    <van-collapse-item title="{{ title2 }}">{{ content2 }}</van-collapse-item>
-    <van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
+    <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
   </van-collapse>
 </demo-block>
 
 <demo-block title="自定义标题内容">
   <van-collapse value="{{ active3 }}" data-key="active3" bind:change="onChange">
-    <van-collapse-item content-class="van-collapse-item__content">
+    <van-collapse-item>
       <view slot="title">{{ title1 }}<van-icon name="question" custom-class="van-icon-question" /></view>
       {{ content1 }}
     </van-collapse-item>
     <van-collapse-item
       title="{{ title2 }}"
-      content-class="van-collapse-item__content"
+     
       value="内容"
       icon="shop"
     >{{ content2 }}</van-collapse-item>
-    <van-collapse-item title="{{ title3 }}" content-class="van-collapse-item__content">{{ content3 }}</van-collapse-item>
+    <van-collapse-item title="{{ title3 }}">{{ content3 }}</van-collapse-item>
   </van-collapse>
 </demo-block>

example/pages/collapse/index.wxss

@@ -1,9 +1,3 @@
-.van-collapse-item__content {
-  font-size: 13px;
-  line-height: 1.5;
-  color: #666;
-}
-
 .van-icon-question {
   margin-left: 5px;
   font-size: 15px !important;

example/pages/switch/index.wxml

@@ -21,12 +21,27 @@
   />
 </demo-block>
 
-<demo-block title="高级用法" padding>
+<demo-block title="自定义大小" padding>
+  <van-switch
+    checked="{{ checked }}"
+    size="24px"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="自定义颜色" padding>
+  <van-switch
+    checked="{{ checked }}"
+    active-color="#4b0"
+    inactive-color="#f44"
+    bind:change="onChange"
+  />
+</demo-block>
+
+<demo-block title="异步控制" padding>
   <van-switch
     checked="{{ checked2 }}"
     size="36px"
-    active-color="#4b0"
-    inactive-color="#f44"
     bind:change="onChange2"
   />
 </demo-block>

example/pages/tabbar/index.wxml

@@ -9,7 +9,7 @@
 
 <demo-block title="自定义图标">
   <van-tabbar active="{{ active2 }}" custom-class="tabbar" bind:change="onChange" safe-area-inset-bottom="{{ false }}">
-    <van-tabbar-item>
+    <van-tabbar-item info="3">
       <span>自定义</span>
       <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
       <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />

example/pages/tag/index.wxml

@@ -30,7 +30,8 @@
   <van-tag class="demo-margin-right" color="#f2826a">标签</van-tag>
   <van-tag class="demo-margin-right" color="#f2826a" plain>标签</van-tag>
   <van-tag class="demo-margin-right" color="#7232dd">标签</van-tag>
-  <van-tag color="#7232dd" plain>标签</van-tag>
+  <van-tag class="demo-margin-right" color="#7232dd" plain>标签</van-tag>
+  <van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
 </demo-block>
 
 <demo-block title="标签大小" padding>

packages/area/index.less

@@ -57,11 +57,10 @@
 
     &__item {
       padding: 0 5px;
-      color: @gray-dark;
+      color: @text-color;
 
       &--selected {
         font-weight: 500;
-        color: @text-color;
       }
 
       &--disabled {

packages/area/index.ts

@@ -33,13 +33,6 @@ VantComponent({
     columns: []
   },
 
-  computed: {
-    displayColumns() {
-      const { columns = [], columnsNum } = this.data;
-      return columns.slice(0, +columnsNum);
-    }
-  },
-
   watch: {
     value(value) {
       this.code = value;
@@ -68,7 +61,8 @@ VantComponent({
 
     onChange(event: Weapp.Event) {
       const { value } = event.detail;
-      const { pickerValue, displayColumns } = this.data;
+      const { pickerValue } = this.data;
+      const displayColumns = this.getDisplayColumns();
       const index = pickerValue.findIndex(
         (item, index) => item !== value[index]
       );
@@ -159,7 +153,8 @@ VantComponent({
     },
 
     getValues() {
-      const { displayColumns = [], pickerValue = [] } = this.data;
+      const { pickerValue = [] } = this.data;
+      const displayColumns = this.getDisplayColumns();
       return displayColumns
         .map((option, index) => option[pickerValue[index]])
         .filter(value => !!value);
@@ -201,6 +196,11 @@ VantComponent({
     reset() {
       this.code = '';
       this.setValues();
+    },
+
+    getDisplayColumns() {
+      const { columns = [], columnsNum } = this.data;
+      return columns.slice(0, +columnsNum);
     }
   }
 });

packages/area/index.wxml

@@ -17,7 +17,8 @@
     class="van-picker__columns"
   >
     <picker-view-column
-      wx:for="{{ displayColumns }}"
+      wx:if="{{ rowIndex < columnsNum }}"
+      wx:for="{{ columns }}"
       wx:for-item="row"
       wx:for-index="rowIndex"
       wx:key="rowIndex"

packages/badge/README.md

@@ -20,7 +20,7 @@
   <van-badge title="标签名称" />
   <van-badge title="标签名称" info="8" />
   <van-badge title="标签名称" info="99" />
-  <van-badge title="标签名称" info="199" />
+  <van-badge title="标签名称" info="99+" />
 </van-badge-group>
 ```
 

packages/badge/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }

packages/badge/index.less

@@ -36,20 +36,7 @@
     }
   }
 
-  &__info {
+  &__text {
-    position: absolute;
+    position: relative;
-    top: 4px;
-    right: 2px;
-    color: @white;
-    font-size: 12px;
-    font-weight: 500;
-    transform: scale(0.8);
-    text-align: center;
-    box-sizing: border-box;
-    padding: 0 6px;
-    min-width: 18px;
-    line-height: 18px;
-    border-radius: 9px;
-    background-color: @red;
   }
 }

packages/badge/index.ts

@@ -7,7 +7,7 @@ VantComponent({
   },
 
   props: {
-    info: Number,
+    info: null,
     title: String
   },
 

packages/badge/index.wxml

@@ -1,4 +1,10 @@
 <view class="van-badge van-hairline custom-class {{ active ? 'van-badge--active' : '' }}" bind:tap="onClick">
-  <view wx:if="{{ info }}" class="van-badge__info">{{ info }}</view>
+  <view class="van-badge__text">
-  {{ title }}
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="right: 4px"
+    />
+    {{ title }}
+  </view>
 </view>

packages/checkbox-group/index.ts

@@ -16,9 +16,9 @@ VantComponent({
   },
 
   props: {
+    max: Number,
     value: Array,
-    disabled: Boolean,
+    disabled: Boolean
-    max: Number
   },
 
   watch: {

packages/checkbox/index.less

@@ -1,7 +1,5 @@
 @import '../common/style/var.less';
 
-@checkbox-size: 20px;
-
 .van-checkbox {
   overflow: hidden;
   user-select: none;
@@ -14,15 +12,15 @@
   }
 
   &__icon {
-    box-sizing: border-box;
     display: block;
+    font-size: 14px;
     width: @checkbox-size;
     height: @checkbox-size;
-    border: 1px solid @gray-light;
     color: transparent;
-    font-size: 14px;
     text-align: center;
-    transition: .2s;
+    box-sizing: border-box;
+    border: 1px solid @checkbox-border-color;
+    transition: @checkbox-transition-duration;
 
     &--round {
       border-radius: 100%;
@@ -30,28 +28,31 @@
 
     &--checked {
       color: @white;
-      border-color: @blue;
+      border-color: @checkbox-checked-icon-color;
-      background-color: @blue;
+      background-color: @checkbox-checked-icon-color;
     }
 
     &--disabled {
-      border-color: @border-color;
+      border-color: @checkbox-disabled-icon-color;
-      background-color: currentColor;
+      background-color: @checkbox-disabled-background-color;
-      color: @background-color;
     }
 
     &--disabled&--checked {
-      border-color: @border-color;
+      color: @checkbox-disabled-icon-color;
-      background-color: @border-color;
     }
   }
 
   &__label {
-    margin-left: 10px;
+    color: @checkbox-label-color;
+    margin-left: @checkbox-label-margin;
 
     &--left {
-      margin: 0 10px 0 0;
       float: left;
+      margin: 0 @checkbox-label-margin 0 0;
+    }
+
+    &--disabled {
+      color: @checkbox-disabled-label-color;
     }
 
     &:empty {

packages/checkbox/index.ts

@@ -23,16 +23,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    iconStyle(): string {
-      const { value, disabled, checkedColor } = this.data;
-      if (checkedColor && value && !disabled) {
-        return `border-color: ${checkedColor}; background-color: ${checkedColor}`;
-      }
-      return '';
-    }
-  },
-
   methods: {
     emitChange(value) {
       const parent = this.getRelationNodes('../checkbox-group/index')[0];

packages/checkbox/index.wxml

@@ -7,12 +7,12 @@
       wx:else
       name="success"
       class="{{ utils.bem('checkbox__icon', [shape, { disabled, checked: value }]) }}"
-      style="{{ iconStyle }}"
+      style="{{ checkedColor && value && !disabled ? 'border-color:' + checkedColor + '; background-color:' + checkedColor : '' }}"
       custom-class="icon-class"
       custom-style="line-height: 20px;"
     />
   </view>
-  <view class="van-checkbox__label van-checkbox__label--{{ labelPosition }} label-class" bindtap="onClickLabel">
+  <view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled }]) }}" bindtap="onClickLabel">
     <slot />
   </view>
 </view>

packages/collapse-item/index.less

@@ -4,7 +4,7 @@
   &__title {
     .van-cell__right-icon {
       transform: rotate(90deg);
-      transition: 0.3s;
+      transition: @collapse-item-transition-duration;
     }
 
     &--expanded {
@@ -14,12 +14,12 @@
     }
 
     &--disabled {
-      & .van-cell,
+      .van-cell,
-      & .van-cell__right-icon {
+      .van-cell__right-icon {
-        color: @gray !important;
+        color: @collapse-item-title-disabled-color !important;
       }
 
-      &:active {
+      .van-cell:active {
         background-color: @white !important;
       }
     }
@@ -28,11 +28,14 @@
   &__wrapper {
     overflow: hidden;
     will-change: max-height;
-    transition: max-height 0.3s ease-in-out;
+    transition: max-height @collapse-item-transition-duration ease-in-out;
   }
 
   &__content {
-    padding: 15px;
+    color: @collapse-item-content-text-color;
-    background-color: @white;
+    padding: @collapse-item-content-padding;
+    font-size: @collapse-item-content-font-size;
+    line-height: @collapse-item-content-line-height;
+    background-color: @collapse-item-content-background-color;
   }
 }

packages/collapse/README.md

@@ -98,8 +98,6 @@ Page({
 });
 ```
 
-
-
 ### Collapse API
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |

packages/common/style/var.less

@@ -37,11 +37,58 @@
 @button-bottom-action-primary-color: @white;
 @button-bottom-action-primary-background-color: @red;
 
+// Checkbox
+@checkbox-size: 20px;
+@checkbox-border-color: @gray-light;
+@checkbox-transition-duration: .2s;
+@checkbox-label-margin: 10px;
+@checkbox-label-color: @text-color;
+@checkbox-checked-icon-color: @blue;
+@checkbox-disabled-icon-color: @gray;
+@checkbox-disabled-label-color: @gray;
+@checkbox-disabled-background-color: @border-color;
+
+// Collapse
+@collapse-item-transition-duration: .3s;
+@collapse-item-content-padding: 15px;
+@collapse-item-content-font-size: 13px;
+@collapse-item-content-line-height: 1.5;
+@collapse-item-content-text-color: @gray-dark;
+@collapse-item-content-background-color: @white;
+@collapse-item-title-disabled-color: @gray;
+
+// Info
+@info-size: 16px;
+@info-color: @white;
+@info-padding: 0 3px;
+@info-font-size: 12px;
+@info-font-weight: 500;
+@info-border-width: 1px;
+@info-background-color: @red;
+@info-font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
+
 // Notify
 @notify-padding: 6px 15px;
 @notify-font-size: 14px;
 @notify-line-height: 20px;
 
+// Switch
+@switch-width: 2em;
+@switch-height: 1em;
+@switch-node-size: 1em;
+@switch-node-z-index: 1;
+@switch-node-background-color: @white;
+@switch-node-box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+@switch-background-color: @white;
+@switch-on-background-color: @blue;
+@switch-transition-duration: .3s;
+@switch-disabled-opacity: .4;
+@switch-border: 1px solid rgba(0, 0, 0, .1);
+
+// SwitchCell
+@switch-cell-padding-top: 9px;
+@switch-cell-padding-bottom: 9px;
+
 // Toast
 @toast-max-width: 70%;
 @toast-font-size: 14px;
@@ -49,7 +96,7 @@
 @toast-line-height: 20px;
 @toast-border-radius: 4px;
 @toast-background-color: rgba(0, 0, 0, .7);
-@toast-icon-size: 50px;
+@toast-icon-size: 48px;
 @toast-text-min-width: 96px;
 @toast-text-padding: 8px 12px;
 @toast-default-padding: 15px;

packages/dialog/README.md

@@ -39,6 +39,7 @@ Dialog.alert({
 ```
 
 #### 消息确认
+
 用于确认消息，包含取消和确认按钮
 
 ```javascript
@@ -127,6 +128,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | zIndex | z-index 层级 | `Number` | `100` |
 | selector | 自定义选择器 | `String` | `van-dialog` |
 | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
@@ -149,6 +151,7 @@ Page({
 | show | 是否显示弹窗 | `Boolean` | - |
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | z-index | z-index 层级 | `Number` | `100` |
 | show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` |
 | show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` |

packages/dialog/dialog.ts

@@ -11,6 +11,7 @@ type DialogOptions = {
   selector?: string;
   transition?: string;
   asyncClose?: boolean;
+  messageAlign?: string;
   confirmButtonText?: string;
   cancelButtonText?: string;
   showConfirmButton?: boolean;
@@ -68,6 +69,7 @@ Dialog.defaultOptions = {
   zIndex: 100,
   overlay: true,
   asyncClose: false,
+  messageAlign: '',
   transition: 'scale',
   selector: '#van-dialog',
   confirmButtonText: '确认',

packages/dialog/index.less

@@ -23,12 +23,21 @@
     line-height: 1.5;
     max-height: 60vh;
     overflow-y: auto;
+    text-align: center;
     -webkit-overflow-scrolling: touch;
 
     &--has-title {
       padding-top: 12px;
       color: @gray-darker;
     }
+
+    &--left {
+      text-align: left;
+    }
+
+    &--right {
+      text-align: right;
+    }
   }
 
   &__footer {

packages/dialog/index.ts

@@ -10,6 +10,7 @@ VantComponent({
     message: String,
     useSlot: Boolean,
     asyncClose: Boolean,
+    messageAlign: String,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,

packages/dialog/index.wxml

@@ -17,7 +17,7 @@
   <slot wx:if="{{ useSlot }}" />
   <view
     wx:elif="{{ message }}"
-    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
+    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
   >
     <text>{{ message }}</text>
   </view>

packages/icon/index.json

@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "van-info": "../info/index"
+  }
 }

packages/icon/index.less

@@ -30,26 +30,6 @@
     }
   }
 
-  &__info {
-    position: absolute;
-    right: 0;
-    top: -8px;
-    color: @white;
-    font-size: 12px;
-    font-weight: 500;
-    font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-    text-align: center;
-    box-sizing: border-box;
-    padding: 0 3px;
-    min-width: 16px;
-    line-height: 14px;
-    border: 1px solid @white;
-    border-radius: 16px;
-    background-color: @red;
-    transform: translateX(50%);
-    transform-origin: 100%;
-  }
-
   &::before {
     display: inline-block;
   }

packages/icon/index.wxml

@@ -5,12 +5,10 @@
   style="{{ color ? 'color: ' + color + ';' : '' }}{{ size ? 'font-size: ' + size + ';' : '' }}{{ customStyle }}"
   bind:tap="onClick"
 >
-  <view
+  <van-info
     wx:if="{{ info !== null }}"
-    class="van-icon__info"
+    info="{{ info }}"
-  >
+  />
-    {{ info }}
-  </view>
   <image
     wx:if="{{ utils.isSrc(name) }}"
     src="{{ name }}"

packages/info/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

packages/info/index.less

@@ -0,0 +1,21 @@
+@import '../common/style/var.less';
+
+.van-info {
+  position: absolute;
+  right: 0;
+  top: -@info-size / 2;
+  color: @info-color;
+  font-size: @info-font-size;
+  font-weight: @info-font-weight;
+  font-family: @info-font-family;
+  text-align: center;
+  box-sizing: border-box;
+  padding: @info-padding;
+  min-width: @info-size;
+  line-height: @info-size - @info-border-width * 2;
+  border: @info-border-width solid @white;
+  border-radius: @info-size;
+  background-color: @info-background-color;
+  transform: translateX(50%);
+  transform-origin: 100%;
+}

packages/info/index.ts

@@ -0,0 +1,8 @@
+import { VantComponent } from '../common/component';
+
+VantComponent({
+  props: {
+    info: null,
+    customStyle: String
+  }
+});

packages/info/index.wxml

@@ -0,0 +1,7 @@
+<view
+  wx:if="{{ info !== null }}"
+  class="custom-class van-info"
+  style="{{ customStyle }}"
+>
+  {{ info }}
+</view>

packages/switch-cell/README.md

@@ -66,7 +66,9 @@ Page({
 | title | 左侧标题 |  `String` | `''` |
 | loading | 是否为加载状态 |  `Boolean` | `false` |
 | disabled | 是否为禁用状态 |  `Boolean` | `false` |
-| size | 开关尺寸 | `String` | `26px` |
+| size | 开关尺寸 | `String` | `24px` |
+| active-color | 开关打开时的背景色 | `String` | `#1989fa` |
+| inactive-color | 开关关闭时的背景色 | `String` | `#fff` |
 
 ### Event
 

packages/switch-cell/index.less

@@ -1,8 +1,8 @@
 @import '../common/style/var.less';
 
 .van-switch-cell {
-  padding-top: 8px;
+  padding-top: @switch-cell-padding-top;
-  padding-bottom: 8px;
+  padding-bottom: @switch-cell-padding-bottom;
 
   &__switch {
     vertical-align: middle;

packages/switch-cell/index.ts

@@ -9,9 +9,11 @@ VantComponent({
     checked: Boolean,
     loading: Boolean,
     disabled: Boolean,
+    activeColor: String,
+    inactiveColor: String,
     size: {
       type: String,
-      value: '26px'
+      value: '24px'
     }
   },
 

packages/switch-cell/index.wxml

@@ -9,6 +9,8 @@
     checked="{{ checked }}"
     loading="{{ loading }}"
     disabled="{{ disabled }}"
+    active-color="{{ activeColor }}"
+    inactive-color="{{ inactiveColor }}"
     custom-class="van-switch-cell__switch"
     bind:change="onChange"
   />

packages/switch/README.md

@@ -42,14 +42,27 @@ Page({
 <van-switch checked="{{ checked }}" loading />
 ```
 
-#### 高级用法
+#### 自定义大小
+
+```html
+<van-switch checked="{{ checked }}" size="24px" />
+```
+
+#### 自定义颜色
 
 ```html
 <van-switch
-  size="36px"
   checked="{{ checked }}"
   active-color="#4b0"
   inactive-color="#f44"
+/>
+```
+
+#### 异步控制
+
+```html
+<van-switch
+  checked="{{ checked }}"
   bind:change="onChange"
 />
 ```

packages/switch/index.less

@@ -1,27 +1,27 @@
 @import '../common/style/var.less';
 
 .van-switch {
-  height: 1em;
-  width: 1.8em;
   display: inline-block;
   position: relative;
-  border-radius: 1em;
+  width: @switch-width;
+  height: @switch-height;
+  border: @switch-border;
+  border-radius: @switch-node-size;
   box-sizing: content-box;
-  border: 1px solid rgba(0, 0, 0, .1);
+  background-color: @switch-background-color;
-  background-color: @white;
+  transition: background-color @switch-transition-duration;
-  transition: background-color .3s;
 
   &__node {
     top: 0;
     left: 0;
-    z-index: 1;
-    width: 1em;
-    height: 1em;
-    transition: .3s;
     position: absolute;
     border-radius: 100%;
-    background-color: @white;
+    width: @switch-node-size;
-    box-shadow: 0 3px 1px 0 rgba(0, 0, 0, .05), 0 2px 2px 0 rgba(0, 0, 0, .1), 0 3px 3px 0 rgba(0, 0, 0, .05);
+    height: @switch-node-size;
+    z-index: @switch-node-z-index;
+    transition: @switch-transition-duration;
+    box-shadow: @switch-node-box-shadow;
+    background-color: @switch-node-background-color;
   }
 
   &__loading {
@@ -31,14 +31,14 @@
   }
 
   &--on {
-    background-color: @blue;
+    background-color: @switch-on-background-color;
 
     .van-switch__node {
-      transform: translateX(.8em);
+      transform: translateX(@switch-width - @switch-node-size);
     }
   }
 
   &--disabled {
-    opacity: .4;
+    opacity: @switch-disabled-opacity;
   }
 }

packages/switch/index.ts

@@ -23,13 +23,6 @@ VantComponent({
     }
   },
 
-  computed: {
-    style() {
-      const backgroundColor = this.data.checked ? this.data.activeColor : this.data.inactiveColor;
-      return `font-size: ${this.data.size}; ${ backgroundColor ? `background-color: ${backgroundColor}` : '' }`
-    }
-  },
-
   created() {
     this.set({ value: this.data.checked });
   },

packages/switch/index.wxml

@@ -1,8 +1,8 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
 
 <view
-  style="{{ style }}"
   class="custom-class {{ utils.bem('switch', { on: checked, disabled }) }}"
+  style="font-size: {{ size }}; {{ (checked ? activeColor : inactiveColor) ? 'background-color: ' + (checked ? activeColor : inactiveColor ) : '' }}"
   bind:tap="onClick"
 >
   <view class="van-switch__node node-class">

packages/tabbar-item/index.json

@@ -1,6 +1,7 @@
 {
   "component": true,
   "usingComponents": {
-    "van-icon": "../icon/index"
+    "van-icon": "../icon/index",
+    "van-info": "../info/index"
   }
 }

packages/tabbar-item/index.less

@@ -19,27 +19,6 @@
     margin-bottom: 5px;
     position: relative;
 
-    .van-icon {
-      display: block;
-
-      &__info {
-        color: @white;
-        left: 100%;
-        top: -.5em;
-        font-size: .6em;
-        padding: 0 .25em;
-        text-align: center;
-        min-width: 1.4em;
-        line-height: 1.4;
-        position: absolute;
-        border-radius: .6em;
-        box-sizing: border-box;
-        background-color: @red;
-        transform: translateX(-50%);
-        font-family: PingFang SC, Helvetica Neue, Arial, sans-serif;
-      }
-    }
-
     &--dot {
       &::after {
         top: 0;
@@ -54,8 +33,9 @@
     }
 
     image {
-      width: 50px;
+      width: 30px;
       height: 18px;
+      display: block;
     }
   }
 

packages/tabbar-item/index.wxml

@@ -6,14 +6,20 @@
     <van-icon
       wx:if="{{ icon }}"
       name="{{ icon }}"
-      info="{{ info }}"
       customStyle="display: block"
     />
     <block wx:else>
-      <slot wx:if="{{ active }}" name="icon-active" />
+      <slot
+        wx:if="{{ active }}"
+        name="icon-active"
+      />
       <slot wx:else name="icon" />
-      <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
     </block>
+    <van-info
+      wx:if="{{ info !== null }}"
+      info="{{ info }}"
+      custom-style="margin-top: 2px"
+    />
   </view>
   <view class="van-tabbar-item__text">
     <slot />

packages/tabbar/README.md

@@ -42,7 +42,7 @@ Page({
 
 ```html
 <van-tabbar active="{{ active }}" bind:change="onChange">
-  <van-tabbar-item>
+  <van-tabbar-item info="3">
     <span>自定义</span>
     <image slot="icon" src="{{ icon.normal }}" class="icon" mode="aspectFit" />
     <image slot="icon-active" src="{{ icon.active }}" mode="aspectFit" />

packages/tag/README.md

@@ -12,6 +12,7 @@
 ### 代码演示
 
 #### 基础用法
+
 通过 type 属性控制 Tag 颜色，默认为灰色
 
 ```html
@@ -22,6 +23,7 @@
 ```
 
 #### 空心样式
+
 设置`plain`属性设置为空心样式
 
 ```html
@@ -32,6 +34,7 @@
 ```
 
 #### 圆角样式
+
 通过`round`设置为圆角样式
 
 ```html
@@ -42,6 +45,7 @@
 ```
 
 #### 标记样式
+
 通过`mark`设置为标记样式(半圆角)
 
 ```html
@@ -58,6 +62,7 @@
 <van-tag color="#f2826a" plain>标签</van-tag>
 <van-tag color="#7232dd">标签</van-tag>
 <van-tag color="#7232dd" plain>标签</van-tag>
+<van-tag color="#ffe1e1" text-color="#ad0000">标签</van-tag>
 ```
 
 #### 标签大小
@@ -74,10 +79,11 @@
 |-----------|-----------|-----------|-------------|
 | type | 类型，可选值为`primary` `success` `danger` | `String` | - |
 | size | 大小, 可选值为`large` `medium` | `String` | - |
-| color | 自定义标签颜色 | `String` | - |
+| color | 标签颜色 | `String` | - |
 | plain | 是否为空心样式 | `Boolean` | `false` |
 | round | 是否为圆角样式 | `Boolean` | `false` |
 | mark | 是否为标记样式 | `Boolean` | `false` |
+| text-color | 文本颜色，优先级高于`color`属性 | `String` | `white` |
 
 ### Slot
 

packages/tag/index.ts

@@ -8,6 +8,10 @@ const COLOR_MAP = {
   success: GREEN
 };
 
+type Style = {
+  [key: string]: string;
+};
+
 VantComponent({
   props: {
     size: String,
@@ -15,14 +19,21 @@ VantComponent({
     mark: Boolean,
     color: String,
     plain: Boolean,
-    round: Boolean
+    round: Boolean,
+    textColor: String
   },
 
   computed: {
     style() {
       const color = this.data.color || COLOR_MAP[this.data.type] || DEFAULT_COLOR;
       const key = this.data.plain ? 'color' : 'background-color';
-      return `${key}: ${color}`;
+      const style = { [key]: color } as Style;
+
+      if (this.data.textColor) {
+        style.color = this.data.textColor;
+      }
+
+      return Object.keys(style).map(key => `${key}: ${style[key]}`).join(';');
     }
   }
 });

packages/wxs/array.wxs

@@ -1,5 +1,5 @@
-function isArray(obj) {
+function isArray(array) {
-  return obj && obj.constructor === 'Array';
+  return array && array.constructor === 'Array';
 }
 
 module.exports.isArray = isArray;