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 @@