From 4e9126e352628b0c44d7cdf732e25bd9e831851c Mon Sep 17 00:00:00 2001
From: cookfront <cookfront@gmail.com>
Date: Fri, 31 Mar 2017 20:47:09 +0800
Subject: [PATCH] switch docs

---
 docs/examples-dist/popup.vue   |   2 +-
 docs/examples-dist/switch.vue  |  50 ++++++---------
 docs/examples-docs/switch.md   | 109 ++++++++++++++++++++++-----------
 packages/switch/src/switch.vue |  24 +++-----
 4 files changed, 101 insertions(+), 84 deletions(-)

diff --git a/docs/examples-dist/popup.vue b/docs/examples-dist/popup.vue
index 1fc5a986a..6ba4e8536 100644
--- a/docs/examples-dist/popup.vue
+++ b/docs/examples-dist/popup.vue
@@ -61,7 +61,7 @@
     }
 
     .zan-popup-4,
-    .zan-popup-4 {
+    .zan-popup-5 {
       width: 100%;
       height: 100%;
     }
diff --git a/docs/examples-dist/switch.vue b/docs/examples-dist/switch.vue
index 2c07c2cac..bec31fbe1 100644
--- a/docs/examples-dist/switch.vue
+++ b/docs/examples-dist/switch.vue
@@ -1,41 +1,34 @@
 <template><section class="demo-switch"><h1 class="demo-title">switch</h1><example-block title="基础用法">
-                <div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
-  <div class="demo-switch__text">{{switchStateText}}</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">ON, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">OFF, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-  <div class="demo-switch__text">ON, LOADING</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-  <div class="demo-switch__text">OFF, LOADING</div>
-</div>
+                <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
+<div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
 
 
 
+
+              </example-block><example-block title="">
+                <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+<div class="demo-switch__text">ON, DISABLED</div>
+
+<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+<div class="demo-switch__text">OFF, DISABLED</div>
+
+              </example-block><example-block title="">
+                <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+<div class="demo-switch__text">ON, LOADING</div>
+
+<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+<div class="demo-switch__text">OFF, LOADING</div>
+
               </example-block></section></template>
 <style>
   @component-namespace demo {
     @b switch {
-      padding: 0 15px 15px;
-
-      @e wrapper {
-        width: 33.33%;
-        float: left;
+      .examples {
         text-align: center;
       }
 
       @e text {
-        margin: 20px 0;
+        margin: 20px auto;
       }
     }
   }
@@ -48,11 +41,6 @@ export default {
       switchState: true
     };
   },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
-  },
   methods: {
     updateState(newState) {
       this.switchState = newState;
diff --git a/docs/examples-docs/switch.md b/docs/examples-docs/switch.md
index d9b948cef..adaaee710 100644
--- a/docs/examples-docs/switch.md
+++ b/docs/examples-docs/switch.md
@@ -1,16 +1,12 @@
 <style>
   @component-namespace demo {
     @b switch {
-      padding: 0 15px 15px;
-
-      @e wrapper {
-        width: 33.33%;
-        float: left;
+      .examples {
         text-align: center;
       }
 
       @e text {
-        margin: 20px 0;
+        margin: 20px auto;
       }
     }
   }
@@ -23,11 +19,6 @@ export default {
       switchState: true
     };
   },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
-  },
   methods: {
     updateState(newState) {
       this.switchState = newState;
@@ -38,30 +29,45 @@ export default {
 
 ## Switch 开关
 
-### 基础用法
+### 使用指南
+
+如果你已经按照[快速上手](/vue/component/quickstart)中引入了整个`ZanUI`，以下**组件注册**就可以忽略了，因为你已经全局注册了`ZanUI`中的全部组件。
+
+#### 全局注册
+
+你可以在全局注册`Switch`组件，比如页面的主文件（`index.js`，`main.js`），这样页面任何地方都可以直接使用`Switch`组件了：
+
+```js
+import Vue from 'vue';
+import { Switch } from '@youzan/zanui-vue';
+import '@youzan/zanui-vue/lib/zanui-css/switch.css';
+
+Vue.component(Switch.name, Switch);
+```
+
+#### 局部注册
+
+如果你只是想在某个组件中使用，你可以在对应组件中注册`Switch`组件，这样只能在你注册的组件中使用`Switch`：
+
+```js
+import { Switch } from '@youzan/zanui-vue';
+
+export default {
+  components: {
+    'zan-switch': Switch
+  }
+};
+```
+
+### 代码演示
+
+#### 基础用法
 
 :::demo 基础用法
 ```html
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
-  <div class="demo-switch__text">{{switchStateText}}</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">ON, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
-  <div class="demo-switch__text">OFF, DISABLED</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
-  <div class="demo-switch__text">ON, LOADING</div>
-</div>
-<div class="demo-switch__wrapper">
-  <zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
-  <div class="demo-switch__text">OFF, LOADING</div>
-</div>
+<zan-switch class="some-customized-class" :checked="switchState" @change="updateState"></zan-switch>
+<div class="demo-switch__text">{{ this.switchState ? ' ON' : 'OFF' }}</div>
+
 
 <script>
 export default {
@@ -70,11 +76,6 @@ export default {
       switchState: true
     };
   },
-  computed: {
-    switchStateText() {
-      return this.switchState ? ' ON' : 'OFF';
-    }
-  },
   methods: {
     updateState(newState) {
       this.switchState = newState;
@@ -85,6 +86,34 @@ export default {
 ```
 :::
 
+#### 禁用状态
+
+设置`disabled`属性为`true`，此时开关不可点击。
+
+:::demo
+```html
+<zan-switch class="some-customized-class" :checked="true" :disabled="true"></zan-switch>
+<div class="demo-switch__text">ON, DISABLED</div>
+
+<zan-switch class="some-customized-class" :checked="false" :disabled="true"></zan-switch>
+<div class="demo-switch__text">OFF, DISABLED</div>
+```
+:::
+
+#### loading状态
+
+设置`loading`属性为`true`，此时开关为加载状态，一般用于点击开关时正在向后端发送请求，此时正在loading，请求成功后，结束loading。
+
+:::demo
+```html
+<zan-switch class="some-customized-class" :checked="true" :loading="true"></zan-switch>
+<div class="demo-switch__text">ON, LOADING</div>
+
+<zan-switch class="some-customized-class" :checked="false" :loading="true"></zan-switch>
+<div class="demo-switch__text">OFF, LOADING</div>
+```
+:::
+
 ### API
 
 | 参数       | 说明      | 类型       | 默认值       | 可选值       |
@@ -92,3 +121,9 @@ export default {
 | checked | 开关状态 | `boolean`  | `false`          | `true`, `false`    |
 | loading | loading状态 | `boolean`  | `false`          | `true`, `false`    |
 | disabled | 禁用状态 | `boolean`  | `false`          | `true`, `false`    |
+
+### Event
+
+| 事件名       | 说明      | 参数       |
+|-----------|-----------|-----------|
+| change | 开关状态切换时触发 | `value`：开关新的状态值 |
diff --git a/packages/switch/src/switch.vue b/packages/switch/src/switch.vue
index 97e39727a..3249c3b93 100644
--- a/packages/switch/src/switch.vue
+++ b/packages/switch/src/switch.vue
@@ -18,7 +18,7 @@ import ZanLoading from 'packages/loading';
  * @param {boolean} [loading=false] - loading状态
  *
  * @example
- * <zan-switch checked="true" disabled="false"></zan-switch>
+ * <zan-switch :checked="true" :disabled="false"></zan-switch>
  */
 export default {
   name: 'zan-switch',
@@ -26,23 +26,17 @@ export default {
     'zan-loading': ZanLoading
   },
   props: {
-    checked: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    }
+    checked: Boolean,
+    disabled: Boolean,
+    loading: Boolean
   },
   computed: {
     switchStates: function() {
-      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off'),
-        'zan-switch--' + (this.disabled ? 'disabled' : '')];
+      const switchStates = ['zan-switch--' + (this.checked ? 'on' : 'off')];
+
+      if (this.disabled) {
+        switchStates.push('zan-switch--disabled');
+      }
 
       return switchStates;
     }