[refactor] Switch: 升级为自定义组件 (#183)

* done

* add example

* doe

example/pages/switch/index.js

@@ -11,26 +11,27 @@ Page(Object.assign({}, Zan.Switch, {
     },
   },
 
-  handleZanSwitchChange(e) {
+  syncChange(e, data) {
-    var componentId = e.componentId;
+    this.setData({
-    var checked = e.checked;
+      sync: {
+        checked: data.checked
+      }
+    });
+  },
 
-    if (componentId == 'sync') {
+  asyncChange(e, data) {
-      // 同步开关
+    this.setData({
+      async: {
+        loading: true
+      }
+    });
+    setTimeout(() => {
       this.setData({
-        [`${componentId}.checked`]: checked
+        async: {
+          loading: false,
+          checked: data.checked
+        }
       });
-    } else if (componentId == 'async') {
+    }, 500);
-      // 异步开关
-      this.setData({
-        [`${componentId}.loading`]: true
-      });
-      setTimeout(() => {
-        this.setData({
-          [`${componentId}.loading`]: false,
-          [`${componentId}.checked`]: checked
-        });
-      }, 500);
-    }
   }
 }));

example/pages/switch/index.json

@@ -1,3 +1,7 @@
 {
-  "navigationBarTitleText": "Switch 开关"
+  "navigationBarTitleText": "Switch 开关",
+  "usingComponents": {
+    "zan-switch": "/packages/switch/index",
+    "zan-panel": "/packages/panel/index"
+  }
 }

example/pages/switch/index.wxml

@@ -4,20 +4,16 @@
 
   <view class="doc-title zan-hairline--bottom">SWITCH</view>
 
-  <view class="zan-panel-title">同步开关</view>
+  <zan-panel title='同步开关'>
-  <view class="zan-panel">
+    <zan-switch checked="{{sync.checked}}" bind:change="syncChange" />
-    <template is="zan-switch" data="{{ ...sync, componentId: 'sync' }}" />
+  </zan-panel>
-  </view>
 
-  <view class="zan-panel-title">异步开关</view>
+  <zan-panel title='同步开关'>
-  <view class="zan-panel">
+    <zan-switch checked="{{async.checked}}" disabled="{{ async.disabled }}" loading="{{ async.loading }}" bind:change="asyncChange" />
-    <template is="zan-switch" data="{{ ...async, componentId: 'async' }}" />
+  </zan-panel>
-  </view>
 
-  <view class="zan-panel-title">开关不可用</view>
+  <zan-panel title='同步开关'>
-  <view class="zan-panel">
+    <zan-switch disabled="{{ false }}" />
-    <template is="zan-switch" data="{{ checked: false, disabled: true, componentId: 'switch3' }}" />
+  </zan-panel>
-    <template is="zan-switch" data="{{ checked: true, disabled: true, componentId: 'switch4' }}" />
-  </view>
 
 </view>

packages/switch/README.md

@@ -5,13 +5,13 @@
 ```json
 {
   "usingComponents": {
-    "zan-switch": "/packages/Panel/panel"
+    "zan-switch": "/packages/switch/index"
   }
 }
 ```
 
 ### 代码演示
-可以在页面任意位置上使用 zan-popup 标签。通过 show 可以控制弹窗是否展示
+=======
 ```html
 <zan-switch
   disabled="{{ disabled }}"
@@ -22,7 +22,7 @@
 ```
 
 ```js
-Page(extend({}, {
+Page({
   data: {
     field: {
       disabled: false,
@@ -36,7 +36,7 @@ Page(extend({}, {
       console.log(event, data);
     }
   }
-}));
+});
 ```
 
 ### API