Doc: add usage guide

docs/examples-docs/actionsheet.md

@@ -55,6 +55,13 @@ export default {
 
 ## Actionsheet 行动按钮
 
+### 使用指南
+``` javascript
+import { Actionsheet } from 'vant';
+
+Vue.component(Actionsheet.name, Actionsheet);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/badge.md

@@ -28,6 +28,13 @@
 
 ## Badge 徽章
 
+### 使用指南
+``` javascript
+import { Badge } from 'vant';
+
+Vue.component(Badge.name, Badge);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/button.md

@@ -21,6 +21,13 @@
 
 ## Button 按钮
 
+### 使用指南
+``` javascript
+import { Button } from 'vant';
+
+Vue.component(Button.name, Button);
+```
+
 ### 代码演示
 
 #### 按钮类型

docs/examples-docs/card.md

@@ -1,5 +1,12 @@
 ## Card 图文组件
 
+### 使用指南
+``` javascript
+import { Card } from 'vant';
+
+Vue.component(Card.name, Card);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/cell-swipe.md

@@ -22,6 +22,13 @@
 </style>
 ## CellSwipe 滑动单元格
 
+### 使用指南
+``` javascript
+import { CellSwipe } from 'vant';
+
+Vue.component(CellSwipe.name, CellSwipe);
+```
+
 ### 代码演示
 
 #### 基础用法
@@ -32,13 +39,8 @@
   <van-cell-group>
     <van-cell title="单元格1" value="单元格1内容"></van-cell>
   </van-cell-group>
-  
+  <span slot="right" class="swipe-delete-btn">删除</span>
-  <span slot="right" class="swipe-delete-btn">
+  <span slot="left" class="swipe-check-btn">选择</span>
-      删除
-  </span>
-  <span slot="left" class="swipe-check-btn">
-      选择
-  </span>
 </van-cell-swipe>
 ```
 :::
@@ -48,13 +50,13 @@
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
 |-----------|-----------|-----------|-------------|-------------|
-| right-width | 右侧滑动按钮宽度 | `number`  |      0     |           |
+| left-width | 左侧滑动按钮宽度 | `number`  | 0 | |
-| left-width | 左侧滑动按钮宽度 | `number`  |       0    |           |
+| right-width | 右侧滑动按钮宽度 | `number`  | 0 | |
 
 ### Slot
 
 | name       | 描述      |
 |-----------|-----------|
 | - | 自定义显示内容 |
-| right | 右侧滑动内容 |
 | left | 左侧滑动内容 |
+| right | 右侧滑动内容 |

docs/examples-docs/cell.md

@@ -10,6 +10,14 @@ export default {
 
 ## Cell 单元格
 
+### 使用指南
+``` javascript
+import { Cell, CellGroup } from 'vant';
+
+Vue.component(Cell.name, Cell);
+Vue.component(CellGroup.name, CellGroup);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/checkbox.md

@@ -35,6 +35,13 @@ export default {
 
 ## Checkbox 复选框
 
+### 使用指南
+``` javascript
+import { Checkbox } from 'vant';
+
+Vue.component(Checkbox.name, Checkbox);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/datetime-picker.md

@@ -27,6 +27,13 @@ export default {
 
 ## DatetimePicker 时间选择
 
+### 使用指南
+``` javascript
+import { DatetimePicker } from 'vant';
+
+Vue.component(DatetimePicker.name, DatetimePicker);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/field.md

@@ -29,6 +29,13 @@ export default {
 
 表单中`input`或`textarea`的输入框。
 
+### 使用指南
+``` javascript
+import { Field } from 'vant';
+
+Vue.component(Field.name, Field);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/layout.md

@@ -28,7 +28,14 @@
 
 ## Layout 布局
 
-主要提供了`van-row`和`van-col`两个组件来进行行列布局。
+提供了`van-row`和`van-col`两个组件来进行行列布局。
+
+### 使用指南
+``` javascript
+import { Layout } from 'vant';
+
+Vue.component(Layout.name, Layout);
+```
 
 ### 代码演示
 

docs/examples-docs/loading.md

@@ -20,6 +20,13 @@
 
 ## Loading 加载
 
+### 使用指南
+``` javascript
+import { Loading } from 'vant';
+
+Vue.component(Loading.name, Loading);
+```
+
 ### 代码演示
 
 #### 渐变深色spinner

docs/examples-docs/panel.md

@@ -29,6 +29,13 @@
 
 ## Panel 面板
 
+### 使用指南
+``` javascript
+import { Panel } from 'vant';
+
+Vue.component(Panel.name, Panel);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/picker.md

@@ -38,6 +38,13 @@ export default {
 
 ## Picker 选择器
 
+### 使用指南
+``` javascript
+import { Picker } from 'vant';
+
+Vue.component(Picker.name, Picker);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/popup.md

@@ -75,6 +75,13 @@ export default {
 
 ## Popup 弹出菜单
 
+### 使用指南
+``` javascript
+import { Popup } from 'vant';
+
+Vue.component(Popup.name, Popup);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/progress.md

@@ -10,6 +10,13 @@
 
 ## Progress 进度条
 
+### 使用指南
+``` javascript
+import { Progress } from 'vant';
+
+Vue.component(Progress.name, Progress);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/quantity.md

@@ -23,6 +23,13 @@ export default {
 
 ## Quantity 数量选择
 
+### 使用指南
+``` javascript
+import { Quantity } from 'vant';
+
+Vue.component(Quantity.name, Quantity);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/radio.md

@@ -25,6 +25,13 @@ export default {
 
 ## Radio 单选框
 
+### 使用指南
+``` javascript
+import { Radio } from 'vant';
+
+Vue.component(Radio.name, Radio);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/search.md

@@ -16,6 +16,13 @@ export default {
 
 ## Search 搜索
 
+### 使用指南
+``` javascript
+import { Search } from 'vant';
+
+Vue.component(Search.name, Search);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/steps.md

@@ -28,6 +28,14 @@ export default {
 
 ## Steps 步骤条
 
+### 使用指南
+``` javascript
+import { Step, Steps } from 'vant';
+
+Vue.component(Step.name, Step);
+Vue.component(Steps.name, Steps);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/swipe.md

@@ -35,6 +35,13 @@ export default {
 
 ## Swipe 轮播
 
+### 使用指南
+``` javascript
+import { Swipe } from 'vant';
+
+Vue.component(Swipe.name, Swipe);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/switch.md

@@ -43,6 +43,13 @@ export default {
 
 ## Switch 开关
 
+### 使用指南
+``` javascript
+import { Switch } from 'vant';
+
+Vue.component(Switch.name, Switch);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tab.md

@@ -49,6 +49,14 @@ export default {
 
 ## Tab 标签
 
+### 使用指南
+``` javascript
+import { Tab, Tabs } from 'vant';
+
+Vue.component(Tab.name, Tab);
+Vue.component(Tabs.name, Tabs);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/tag.md

@@ -10,6 +10,13 @@
 
 ## Tag 标记
 
+### 使用指南
+``` javascript
+import { Tag } from 'vant';
+
+Vue.component(Tag.name, Tag);
+```
+
 ### 代码演示
 
 #### 基础用法

docs/examples-docs/uploader.md

@@ -16,6 +16,13 @@ export default {
 
 ## Uploader 图片上传
 
+### 使用指南
+``` javascript
+import { Uploader } from 'vant';
+
+Vue.component(Uploader.name, Uploader);
+```
+
 ### 代码演示
 
 #### 基础用法