From 2d5ba278377194ec9c40ab3b8f1de50c74be8280 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= <admin@aresn.com>
Date: Thu, 2 Mar 2017 11:19:00 +0800
Subject: [PATCH] support Switch

support Switch
---
 CHANGE.md                        |  4 +++-
 README.md                        |  2 +-
 src/components/switch/switch.vue | 27 ++++++++++++++++++++-------
 src/index.js                     |  4 ++--
 test/app.vue                     |  1 +
 test/main.js                     |  4 ++++
 test/routers/switch.vue          | 30 ++++++++++--------------------
 7 files changed, 41 insertions(+), 31 deletions(-)

diff --git a/CHANGE.md b/CHANGE.md
index ffeca998..d572e082 100644
--- a/CHANGE.md
+++ b/CHANGE.md
@@ -7,4 +7,6 @@ value 改为了 label，使用 v-model，废弃 checked
 ### Checkbox
 使用 v-model
 ### CheckboxGroup
-value 改为了 label，使用 v-model，废弃 checked
\ No newline at end of file
+value 改为了 label，使用 v-model，废弃 checked
+### Switch
+废弃checked， 改为了 value，使用 v-model
\ No newline at end of file
diff --git a/README.md b/README.md
index 5cb0997e..e623fc43 100644
--- a/README.md
+++ b/README.md
@@ -23,7 +23,7 @@
 - [x] Input
 - [x] Radio
 - [x] Checkbox
-- [ ] Switch
+- [x] Switch
 - [ ] Table
 - [ ] Select
 - [ ] Slider
diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue
index 5a70b494..6c5c4800 100644
--- a/src/components/switch/switch.vue
+++ b/src/components/switch/switch.vue
@@ -1,8 +1,8 @@
 <template>
     <span :class="wrapClasses" @click="toggle">
         <span :class="innerClasses">
-            <slot name="open" v-if="checked"></slot>
-            <slot name="close" v-if="!checked"></slot>
+            <slot name="open" v-if="currentValue"></slot>
+            <slot name="close" v-if="!currentValue"></slot>
         </span>
     </span>
 </template>
@@ -13,7 +13,7 @@
 
     export default {
         props: {
-            checked: {
+            value: {
                 type: Boolean,
                 default: false
             },
@@ -27,12 +27,17 @@
                 }
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            }
+        },
         computed: {
             wrapClasses () {
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-checked`]: this.checked,
+                        [`${prefixCls}-checked`]: this.currentValue,
                         [`${prefixCls}-disabled`]: this.disabled,
                         [`${prefixCls}-${this.size}`]: !!this.size
                     }
@@ -48,9 +53,17 @@
                     return false;
                 }
 
-                this.checked = !this.checked;
-                this.$emit('on-change', this.checked);
-                this.$dispatch('on-form-change', this.checked);
+                const checked = !this.currentValue;
+                this.currentValue = checked;
+                this.$emit('input', checked);
+                this.$emit('on-change', checked);
+                // todo 事件
+//                this.$dispatch('on-form-change', this.checked);
+            }
+        },
+        watch: {
+            value (val) {
+                this.currentValue = val;
             }
         }
     };
diff --git a/src/index.js b/src/index.js
index 50a23d10..c7bee1f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -32,7 +32,7 @@ import Radio from './components/radio';
 // import Slider from './components/slider';
 // import Spin from './components/spin';
 import Steps from './components/steps';
-// import Switch from './components/switch';
+import Switch from './components/switch';
 // import Table from './components/table';
 // import Tabs from './components/tabs';
 // import Tag from './components/tag';
@@ -98,7 +98,7 @@ const iview = {
     // Spin,
     Step: Steps.Step,
     Steps,
-    // Switch,
+    iSwitch: Switch,
     // iTable: Table,
     // Tabs: Tabs,
     // TabPane: Tabs.Pane,
diff --git a/test/app.vue b/test/app.vue
index 2b39f0da..e6e6ee9d 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -21,6 +21,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
                 <li><router-link to="/checkbox">Checkbox</router-link></li>
                 <li><router-link to="/steps">Steps</router-link></li>
                 <li><router-link to="/timeline">Timeline</router-link></li>
+                <li><router-link to="/switch">Switch</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 6a28d57c..d0f7fa26 100644
--- a/test/main.js
+++ b/test/main.js
@@ -48,6 +48,10 @@ const router = new VueRouter({
         {
           path: '/timeline',
           component: require('./routers/timeline.vue')
+        },
+        {
+            path: '/switch',
+            component: require('./routers/switch.vue')
         }
     ]
 });
diff --git a/test/routers/switch.vue b/test/routers/switch.vue
index d358a783..21e4a8b8 100644
--- a/test/routers/switch.vue
+++ b/test/routers/switch.vue
@@ -1,33 +1,23 @@
 <template>
-    <Switch @on-change="change"></Switch>
-    <Switch>
-        <span slot="open">开</span>
-        <span slot="close">关</span>
-    </Switch>
-    <Switch size="large">
-        <span slot="open">ON</span>
-        <span slot="close">OFF</span>
-    </Switch>
-    <Switch>
-        <Icon type="android-done" slot="open"></Icon>
-        <Icon type="android-close" slot="close"></Icon>
-    </Switch>
-    <Switch :disabled="disabled"></Switch>
-    <i-button type="primary" @click="disabled = !disabled">Toggle Disabled</i-button>
-    <Switch size="small"></Switch>
+    <div>
+        <i-switch v-model="m1">
+            <span slot="open">开</span>
+            <span slot="close">关</span>
+        </i-switch>
+        {{ m1 }}
+        <div @click="m1 = !m1">toggle</div>
+    </div>
 </template>
 <script>
-    import { Switch, Message, iButton, Icon } from 'iview';
     export default {
-        components: { Switch, Message, iButton, Icon },
         data () {
             return {
-                disabled: true
+                m1: false
             }
         },
         methods: {
             change (status) {
-                Message.info('开关状态：' + status);
+                console.log(status)
             }
         }
     }