fix bugs and add new features (#25)

* fix bugs and add new features

* add unit test

* fix tab/tag/datetime-picker bugs

docs/examples-docs/actionsheet.md

@@ -83,6 +83,7 @@ Vue.component(ActionSheet.name, ActionSheet);
 
 ```js
 import { ActionSheet } from 'vant';
+import 'vant/lib/vant-css/actionSheet.css';
 
 export default {
   components: {

docs/examples-docs/badge.md

@@ -53,6 +53,7 @@ Vue.component(BadgeGroup.name, BadgeGroup);
 
 ```js
 import { Badge, BadgeGroup } from 'vant';
+import 'vant/lib/vant-css/badge.css';
 
 export default {
   components: {

docs/examples-docs/button.md

@@ -44,6 +44,7 @@ Vue.component(Button.name, Button);
 
 ```js
 import { Button } from 'vant';
+import 'vant/lib/vant-css/button.css';
 
 export default {
   components: {
@@ -170,7 +171,7 @@ export default {
 |-----------|-----------|-----------|-------------|-------------|
 | type | 按钮类型 | `string`  | `default`          | `primary`, `danger`   |
 | size | 按钮尺寸 | `string`  | `normal`          | `large`, `small`, `mini`  |
-| tag | 按钮标签 | `string`  | `button`          | `a`, `span`, ...  |
+| tag | 按钮标签 | `string`  | `button`          | 任何有意义的`html`标签, 如`a`, `span`等  |
 | diabled | 按钮是否禁用 | `boolean`  |  `false`  |      |
 | block | 按钮是否显示为块级元素 | `boolean`  |   `false`   |      |
 | bottomAction | 按钮是否显示为底部行动按钮，一般显示在页面底部，有特殊样式 | `boolean`  |   `false`   |      |

docs/examples-docs/card.md

@@ -22,6 +22,7 @@ Vue.component(Card.name, Card);
 
 ```js
 import { Card } from 'vant';
+import 'vant/lib/vant-css/card.css';
 
 export default {
   components: {

docs/examples-docs/cell.md

@@ -20,9 +20,10 @@ export default {
 
 ```js
 import Vue from 'vue';
-import { Cell } from 'vant';
+import { Cell, CellGroup } from 'vant';
 import 'vant/lib/vant-css/cell.css';
 
+Vue.component(CellGroup.name, CellGroup);
 Vue.component(Cell.name, Cell);
 ```
 
@@ -32,9 +33,11 @@ Vue.component(Cell.name, Cell);
 
 ```js
 import { Cell } from 'vant';
+import 'vant/lib/vant-css/cell.css';
 
 export default {
   components: {
+    'van-cell-group': CellGroup,
     'van-cell': Cell
   }
 };
@@ -44,6 +47,8 @@ export default {
 
 #### 基础用法
 
+你可以将`van-cell-group`组件看成一个容器即可。
+
 :::demo 基础用法
 ```html
 <van-cell-group>

docs/examples-docs/checkbox.md

@@ -60,6 +60,7 @@ Vue.component(CheckboxGroup.name, CheckboxGroup);
 
 ```js
 import { Checkbox, CheckboxGroup } from 'vant';
+import 'vant/lib/vant-css/checkbox.css';
 
 export default {
   components: {

docs/examples-docs/field.md

@@ -44,6 +44,7 @@ Vue.component(Field.name, Field);
 
 ```js
 import { Field } from 'vant';
+import 'vant/lib/vant-css/field.css';
 
 export default {
   components: {

docs/examples-docs/icon.md

@@ -38,6 +38,7 @@ Vue.component(Icon.name, Icon);
 
 ```js
 import { Icon } from 'vant';
+import 'vant/lib/vant-css/icon.css';
 
 export default {
   components: {

docs/examples-docs/layout.md

@@ -56,6 +56,8 @@ Vue.component(Col.name, Col);
 
 ```js
 import { Row, Col } from 'vant';
+import 'vant/lib/vant-css/col.css';
+import 'vant/lib/vant-css/row.css';
 
 export default {
   components: {
@@ -106,7 +108,7 @@ Layout组件提供了`24列栅格`，通过在`van-col`上添加`span`属性设
 
 :::demo 在列元素之间增加间距
 ```html
-<van-row gutter="10">
+<van-row gutter="20">
   <van-col span="8">
     <div class="gray">span: 8</div>
   </van-col>

docs/examples-docs/loading.md

@@ -44,6 +44,7 @@ Vue.component(Loading.name, Loading);
 
 ```js
 import { Loading } from 'vant';
+import 'vant/lib/vant-css/loading.css';
 
 export default {
   components: {

docs/examples-docs/panel.md

@@ -53,6 +53,7 @@ Vue.component(Panel.name, Panel);
 
 ```js
 import { Panel } from 'vant';
+import 'vant/lib/vant-css/panel.css';
 
 export default {
   components: {

docs/examples-docs/picker.md

@@ -59,6 +59,7 @@ Vue.component(Picker.name, Picker);
 
 ```js
 import { Picker } from 'vant';
+import 'vant/lib/vant-css/picker.css';
 
 export default {
   components: {

docs/examples-docs/popup.md

@@ -102,6 +102,7 @@ Vue.component(Popup.name, Popup);
 
 ```js
 import { Popup } from 'vant';
+import 'vant/lib/vant-css/popup.css';
 
 export default {
   components: {

docs/examples-docs/progress.md

@@ -34,6 +34,7 @@ Vue.component(Progress.name, Progress);
 
 ```js
 import { Progress } from 'vant';
+import 'vant/lib/vant-css/progress.css';
 
 export default {
   components: {

docs/examples-docs/quantity.md

@@ -47,6 +47,7 @@ Vue.component(Quantity.name, Quantity);
 
 ```js
 import { Quantity } from 'vant';
+import 'vant/lib/vant-css/quantity.css';
 
 export default {
   components: {

docs/examples-docs/radio.md

@@ -50,6 +50,7 @@ Vue.component(RadioGroup.name, RadioGroup);
 
 ```js
 import { Radio, RadioGroup } from 'vant';
+import 'vant/lib/vant-css/radio.css';
 
 export default {
   components: {

docs/examples-docs/search.md

@@ -38,6 +38,7 @@ Vue.component(Search.name, Search);
 
 ```js
 import { Search } from 'vant';
+import 'vant/lib/vant-css/search.css';
 
 export default {
   components: {

docs/examples-docs/steps.md

@@ -53,6 +53,7 @@ Vue.component(Step.name, Step);
 
 ```js
 import { Steps, Step } from 'vant';
+import 'vant/lib/vant-css/steps.css';
 
 export default {
   components: {
@@ -97,7 +98,7 @@ export default {
 
 #### 只显示步骤条
 
-当你不设置`title`或`description`属性时，就会🈯️显示步骤条，而没有步骤的详细信息。
+当你不设置`title`或`description`属性时，就会只显示步骤条，而没有步骤的详细信息。
 
 :::demo 只显示步骤条
 ```html
@@ -110,6 +111,22 @@ export default {
 ```
 :::
 
+### 高级用法
+
+可以使用具名`slot`增加自定义内容，其中包含`icon`和`message-extra`。
+
+:::demo 高级用法
+```html
+<van-steps :active="active" title="等待商家发货">
+  <van-icon slot="icon" name="like"></van-icon>
+  <p slot="message-extra">流程</p>
+  <van-step>买家下单</van-step>
+  <van-step>商家接单</van-step>
+  <van-step>买家提货</van-step>
+  <van-step>交易完成</van-step>  
+</van-steps>
+```
+:::
 
 ### Steps API
 

docs/examples-docs/swipe.md

@@ -60,6 +60,7 @@ Vue.component(SwipeItem.name, SwipeItem);
 
 ```js
 import { Swipe, SwipeItem } from 'vant';
+import 'vant/lib/vant-css/swipe.css';
 
 export default {
   components: {

docs/examples-docs/switch.md

@@ -67,6 +67,7 @@ Vue.component(Switch.name, Switch);
 
 ```js
 import { Switch } from 'vant';
+import 'vant/lib/vant-css/switch.css';
 
 export default {
   components: {

docs/examples-docs/tab.md

@@ -74,6 +74,7 @@ Vue.component(Tabs.name, Tabs);
 
 ```js
 import { Tab, Tabs } from 'vant';
+import 'vant/lib/vant-css/tab.css';
 
 export default {
   components: {
@@ -103,7 +104,7 @@ export default {
 
 #### active特定tab
 
-可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`。
+可以在`van-tabs`上设置`active`为对应`tab`的索引（从0开始，即0代表第一个）即可激活对应`tab`，默认为0。
 
 :::demo 基础用法
 ```html
@@ -117,6 +118,20 @@ export default {
 ```
 :::
 
+### 设置切换tab的动画时间
+
+通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
+
+:::demo 设置切换tab的动画时间
+```html
+<van-tabs :duration="0.6">
+  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项二">内容二</van-tab>
+  <van-tab title="选项三">内容三</van-tab>
+</van-tabs>
+```
+:::
+
 #### 禁用tab
 
 在对应的`van-tab`上设置`disabled`属性即可，如果需要监听禁用事件，可以监听`disabled`事件。
@@ -124,7 +139,7 @@ export default {
 :::demo 禁用tab
 ```html
 <van-tabs>
-  <van-tab title="选项一">内容一</van-tab>
+  <van-tab title="选项三">内容一</van-tab>
   <van-tab title="选项二" disabled @disabled="popalert">内容二</van-tab>
   <van-tab title="选项三">内容三</van-tab>
   <van-tab title="选项四">内容四</van-tab>
@@ -235,6 +250,7 @@ export default {
 | classtype | 两种UI | `string`  | `line` |     `line`, `card`      |
 | active | 默认激活的tab | `string`, `number`  | `0` |           |
 | navclass | tabs的内部nav上的自定义classname | `string`  |  |           |
+| duration | 切换tab的动画时间 | `number` | `0.3` | |           |
 
 
 ### van-tab API

docs/examples-docs/tag.md

@@ -32,6 +32,7 @@ Vue.component(Tag.name, Tag);
 
 ```js
 import { Tag } from 'vant';
+import 'vant/lib/vant-css/tag.css';
 
 export default {
   components: {
@@ -44,18 +45,17 @@ export default {
 
 #### 基础用法
 
-`Tag`目前有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
+`Tag`默认是灰色，另外还有有三种类型，`danger`、`success`、`primary`，它们分别显示为红色，绿色和蓝色，你也可以加上自定义的类，为它们加上其他的颜色。
 
 :::demo 基础用法
 ```html
 <div class="tags-container">
   <van-tag>返现</van-tag>
-  <van-tag plain>返现</van-tag>
 </div>
 <div class="tags-container">
   <van-tag type="danger">返现</van-tag>
-  <van-tag type="danger">四字标签</van-tag>
-  <van-tag type="danger">一</van-tag>
+  <van-tag type="success">四字标签</van-tag>
+  <van-tag type="primary">一</van-tag>
 </div>
 ```
 :::
@@ -66,6 +66,10 @@ export default {
 
 :::demo 高级用法
 ```html
+<div class="tags-container">
+  <van-tag>返现</van-tag>
+  <van-tag plain>返现</van-tag>
+</div>
 <div class="tags-container">
   <van-tag type="danger">返现</van-tag>
   <van-tag plain type="danger">返现</van-tag>
@@ -78,9 +82,6 @@ export default {
   <van-tag type="success">返现</van-tag>
   <van-tag plain type="success">返现</van-tag>
 </div>
-<div class="tags-container">
-  <van-tag type="danger" mark>返现</van-tag>
-</div>
 ```
 :::
 

docs/examples-docs/uploader.md

@@ -37,6 +37,7 @@ Vue.component(Uploader.name, Uploader);
 
 ```js
 import { Uploader } from 'vant';
+import 'vant/lib/vant-css/uploader.css';
 
 export default {
   components: {