diff --git a/CHANGE.md b/CHANGE.md
index ffeca99..d572e08 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 5cb0997..e623fc4 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 5a70b49..6c5c480 100644
--- a/src/components/switch/switch.vue
+++ b/src/components/switch/switch.vue
@@ -1,8 +1,8 @@
-
-
+
+
@@ -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 50a23d1..c7bee1f 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 2b39f0d..e6e6ee9 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; }
Checkbox
Steps
Timeline
+ Switch
diff --git a/test/main.js b/test/main.js
index 6a28d57..d0f7fa2 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 d358a78..21e4a8b 100644
--- a/test/routers/switch.vue
+++ b/test/routers/switch.vue
@@ -1,33 +1,23 @@
-
-
- 开
- 关
-
-
- ON
- OFF
-
-
-
-
-
-
- Toggle Disabled
-
+
+
+ 开
+ 关
+
+ {{ m1 }}
+
toggle
+