From fbf4a934240fff6420e6262f809df9964bdab860 Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Sat, 1 Apr 2017 11:36:44 +0800
Subject: [PATCH] docs

---
 docs/examples-dist/image-preview.vue |  8 +++--
 docs/examples-docs/checkbox.md       | 42 ++++++++++++++++++++++++++
 docs/examples-docs/field.md          | 44 ++++++++++++++++++++++++----
 docs/examples-docs/image-preview.md  | 39 ++++++++++++++++++++----
 docs/examples-docs/radio.md          | 40 +++++++++++++++++++++++++
 docs/examples-docs/uploader.md       | 39 ++++++++++++++++++++++--
 6 files changed, 197 insertions(+), 15 deletions(-)

diff --git a/docs/examples-dist/image-preview.vue b/docs/examples-dist/image-preview.vue
index 37389b507..708c8ea34 100644
--- a/docs/examples-dist/image-preview.vue
+++ b/docs/examples-dist/image-preview.vue
@@ -16,13 +16,17 @@
 <script>
 import Vue from "vue";import ExampleBlock from "../components/example-block";Vue.component("example-block", ExampleBlock);
 import { ImagePreview } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
       ]);
     }
   }
diff --git a/docs/examples-docs/checkbox.md b/docs/examples-docs/checkbox.md
index 8e94f0d31..3bc2fb72c 100644
--- a/docs/examples-docs/checkbox.md
+++ b/docs/examples-docs/checkbox.md
@@ -37,8 +37,42 @@ export default {
 
 ## Checkbox 复选框
 
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Checkbox`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Checkbox`组件了：
+
+```js
+import Vue from 'vue';
+import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/checkbox.css';
+
+Vue.component(Checkbox.name, Checkbox);
+Vue.component(CheckboxGroup.name, CheckboxGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Checkbox`组件，这样只能在你注册的组件中使用`Checkbox`：
+
+```js
+import { Checkbox, CheckboxGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-checkbox': Checkbox,
+    'zan-checkbox-group': CheckboxGroup
+  }
+};
+```
+
 ### 基础用法
 
+通过`v-model`绑定值即可。当`Checkbox`选中时，绑定的值即为`true`，否则为`false`。当单个`Checkbox`使用时，更建议使用`Switch`组件。
+
 :::demo 基础用法
 ```html
 <div class="zan-checkbox-wrapper">
@@ -59,6 +93,8 @@ export default {
 
 ### 禁用状态
 
+设置`disabled`属性即可，此时`Checkbox`不能点击。
+
 :::demo 禁用状态
 ```html
 <div class="zan-checkbox-wrapper">
@@ -79,6 +115,8 @@ export default {
 
 ### Checkbox组
 
+需要与`zan-checkbox-group`一起使用，值通过`v-model`绑定在`zan-checkbox-group`上，例如下面的`result`，此时`result`的值是一个数组。数组中的项即为选中的`Checkbox`的`name`属性设置的值。
+
 :::demo Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
@@ -112,6 +150,8 @@ export default {
 
 ### 禁用Checkbox组
 
+禁用`zan-checkbox-group`，此时整个组都不可点击。
+
 :::demo 禁用Checkbox组
 ```html
 <div class="zan-checkbox-wrapper">
@@ -139,6 +179,8 @@ export default {
 
 ### 与Cell组件一起使用
 
+此时你需要再引入`Cell`和`CellGroup`组件。
+
 :::demo 与Cell组件一起使用
 ```html
 <zan-checkbox-group v-model="result">
diff --git a/docs/examples-docs/field.md b/docs/examples-docs/field.md
index d3b562795..0c9a9d32b 100644
--- a/docs/examples-docs/field.md
+++ b/docs/examples-docs/field.md
@@ -22,7 +22,39 @@ export default {
 
 表单中`input`或`textarea`的输入框。
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Field`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Field`组件了：
+
+```js
+import Vue from 'vue';
+import { Field } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/field.css';
+
+Vue.component(Field.name, Field);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Field`组件，这样只能在你注册的组件中使用`Field`：
+
+```js
+import { Field } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-field': Field
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 根据`type`属性显示不同的输入框。
 
@@ -36,7 +68,7 @@ export default {
 ```
 :::
 
-### 无label的输入框
+#### 无label的输入框
 
 不传入`label`属性即可。
 
@@ -48,7 +80,7 @@ export default {
 ```
 :::
 
-### 带border的输入框
+#### 带border的输入框
 
 传入一个`border`属性。
 
@@ -60,7 +92,7 @@ export default {
 ```
 :::
 
-### 禁用的输入框
+#### 禁用的输入框
 
 传入`disabled`属性即可。
 
@@ -72,7 +104,7 @@ export default {
 ```
 :::
 
-### 错误的输入框
+#### 错误的输入框
 
 传入`error`属性即可。
 
@@ -85,7 +117,7 @@ export default {
 :::
 
 
-### Autosize的输入框(仅支持textarea)
+#### Autosize的输入框(仅支持textarea)
 
 传入`autosize`属性, 且将`rows`设为1。
 
diff --git a/docs/examples-docs/image-preview.md b/docs/examples-docs/image-preview.md
index 05ec9729b..b6ddaeb90 100644
--- a/docs/examples-docs/image-preview.md
+++ b/docs/examples-docs/image-preview.md
@@ -10,13 +10,17 @@
 
 <script>
 import { ImagePreview } from 'src/index';
+import MobileComputed from 'components/mobile-computed';
 
 export default {
+  mixins: [MobileComputed],
+
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FkubrzN7AgGwLlTeb1E89-T_ZjBg.png'
       ]);
     }
   }
@@ -25,7 +29,22 @@ export default {
 
 ## ImagePreview 图片预览
 
-### 基础用法
+### 使用指南
+
+`ImagePreview`和其他组件不同，不是通过HTML结构的方式来使用，而是通过函数调用的方式。使用前需要先引入它，它接受一个数组作为参数，数组中的每一项对应了图片链接。
+
+```js
+import { ImagePreview } from '@youzan/zanui-vue';
+
+ImagePreview([
+  imageUrl1,
+  imageUrl2
+]);
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo
 ```html
@@ -38,8 +57,8 @@ export default {
   methods: {
     handleImagePreview() {
       ImagePreview([
-        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg?imageView2/2/w/980/h/980/q/75/format/webp',
-        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg?imageView2/2/w/980/h/980/q/75/format/webp'
+        'https://img.yzcdn.cn/upload_files/2017/03/14/FmTPs0SeyQaAOSK1rRe1sL8RcwSY.jpeg',
+        'https://img.yzcdn.cn/upload_files/2017/03/15/FvexrWlG_WxtCE9Omo5l27n_mAG_.jpeg'
       ]);
     }
   }
@@ -48,3 +67,13 @@ export default {
 ```
 :::
 
+点击以下按钮查看手机端效果：
+
+<zan-button @click="mobileShow = true">点击查看手机端效果</zan-button>
+<mobile-popup v-model="mobileShow" :url="mobileUrl"></mobile-popup>
+
+### 方法参数
+
+| 参数名       | 说明      | 类型 |
+|-----------|-----------|-----------|
+| imageUrls | 需要预览的图片 | `Array` |
diff --git a/docs/examples-docs/radio.md b/docs/examples-docs/radio.md
index 826379134..8fbf28a18 100644
--- a/docs/examples-docs/radio.md
+++ b/docs/examples-docs/radio.md
@@ -27,8 +27,42 @@ export default {
 
 ## Radio 单选框
 
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Radio`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Radio`组件了：
+
+```js
+import Vue from 'vue';
+import { Radio, RadioGroup } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/radio.css';
+
+Vue.component(Radio.name, Radio);
+Vue.component(RadioGroup.name, RadioGroup);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Radio`组件，这样只能在你注册的组件中使用`Radio`：
+
+```js
+import { Radio, RadioGroup } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-radio': Radio,
+    'zan-radio-group': RadioGroup
+  }
+};
+```
+
 ### 基础用法
 
+通过`v-model`绑定值即可。当`Radio`选中时，绑定的值即为`Radio`中`name`属性设置的值。
+
 :::demo 基础用法
 ```html
 <div class="zan-radios">
@@ -50,6 +84,8 @@ export default {
 
 ### 禁用状态
 
+设置`disabled`属性即可，此时`Radio`不能点击。
+
 :::demo 禁用状态
 ```html
 <div class="zan-radios">
@@ -71,6 +107,8 @@ export default {
 
 ### radio组
 
+需要与`zan-radio-group`一起使用，在`zan-radio-group`通过`v-model`来绑定当前选中的值。例如下面的`radio3`：
+
 :::demo radio组
 ```html
 <div class="zan-radios">
@@ -94,6 +132,8 @@ export default {
 
 ### 与Cell组件一起使用
 
+此时你需要再引入`Cell`和`CellGroup`组件。
+
 :::demo 与Cell组件一起使用
 ```html
 <zan-radio-group v-model="radio4">
diff --git a/docs/examples-docs/uploader.md b/docs/examples-docs/uploader.md
index 37d503191..27d19c285 100644
--- a/docs/examples-docs/uploader.md
+++ b/docs/examples-docs/uploader.md
@@ -12,9 +12,42 @@ export default {
   }
 };  
 </script>
+
 ## Uploader 图片上传
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Uploader`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Uploader`组件了：
+
+```js
+import Vue from 'vue';
+import { Uploader } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/uploader.css';
+
+Vue.component(Uploader.name, Uploader);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Uploader`组件，这样只能在你注册的组件中使用`Uploader`：
+
+```js
+import { Uploader } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-uploader': Uploader
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
@@ -26,7 +59,9 @@ export default {
 </div>
 ```
 :::
-### 自定义上传图标
+
+#### 自定义上传图标
+
 :::demo 自定义上传图标
 ```html
 <div class="uploader-container">