support Checkbox

support Checkbox

src/components/checkbox/checkbox-group.vue

@@ -9,42 +9,49 @@
     export default {
         name: 'checkboxGroup',
         props: {
-            model: {
+            value: {
                 type: Array,
                 default () {
                     return [];
                 }
             }
         },
+        data () {
+            return {
+                currentValue: this.value
+            };
+        },
         computed: {
             classes () {
                 return `${prefixCls}`;
             }
         },
-        compiled () {
+        mounted () {
             this.updateModel(true);
         },
         methods: {
             updateModel (update) {
-                const model = this.model;
+                const value = this.value;
 
                 this.$children.forEach((child) => {
-                    child.model = model;
+                    child.model = value;
 
                     if (update) {
-                        child.selected = model.indexOf(child.value) >= 0;
+                        child.currentValue = value.indexOf(child.label) >= 0;
                         child.group = true;
                     }
                 });
             },
             change (data) {
-                this.model = data;
+                this.currentValue = data;
+                this.$emit('input', data);
                 this.$emit('on-change', data);
-                this.$dispatch('on-form-change', data);
+                // todo 事件
+//                this.$dispatch('on-form-change', data);
             }
         },
         watch: {
-            model () {
+            value () {
                 this.updateModel(true);
             }
         }

src/components/checkbox/checkbox.vue

@@ -7,7 +7,7 @@
                 type="checkbox"
                 :class="inputClasses"
                 :disabled="disabled"
-                :value="value"
+                :value="label"
                 v-model="model"
                 @change="change">
             <input
@@ -15,28 +15,29 @@
                 type="checkbox"
                 :class="inputClasses"
                 :disabled="disabled"
-                v-model="checked"
+                :checked="currentValue"
                 @change="change">
         </span>
-        <slot v-if="showSlot"><span v-el:slot>{{ value }}</span></slot>
+        <slot v-if="showSlot"><span ref="slot">{{ label }}</span></slot>
     </label>
 </template>
 <script>
     const prefixCls = 'ivu-checkbox';
 
     export default {
+        name: 'Checkbox',
         props: {
             disabled: {
                 type: Boolean,
                 default: false
             },
             value: {
-                type: [String, Number, Boolean]
-            },
-            checked: {
                 type: Boolean,
                 default: false
             },
+            label: {
+                type: [String, Number, Boolean]
+            },
             indeterminate: {
                 type: Boolean,
                 default: false
@@ -45,7 +46,7 @@
         data () {
             return {
                 model: [],
-                selected: false,
+                currentValue: this.value,
                 group: false,
                 showSlot: true
             };
@@ -56,7 +57,7 @@
                     `${prefixCls}-wrapper`,
                     {
                         [`${prefixCls}-group-item`]: this.group,
-                        [`${prefixCls}-wrapper-checked`]: this.selected,
+                        [`${prefixCls}-wrapper-checked`]: this.currentValue,
                         [`${prefixCls}-wrapper-disabled`]: this.disabled
                     }
                 ];
@@ -65,7 +66,7 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-checked`]: this.selected,
+                        [`${prefixCls}-checked`]: this.currentValue,
                         [`${prefixCls}-disabled`]: this.disabled,
                         [`${prefixCls}-indeterminate`]: this.indeterminate
                     }
@@ -78,11 +79,12 @@
                 return `${prefixCls}-input`;
             }
         },
-        ready () {
+        mounted () {
+            // todo 使用 while向上查找
             if (this.$parent && this.$parent.$options.name === 'checkboxGroup') this.group = true;
             if (!this.group) {
                 this.updateModel();
-                if (this.$els.slot && this.$els.slot.innerHTML === '') {
+                if (this.$refs.slot && this.$refs.slot.innerHTML === '') {
                     this.showSlot = false;
                 }
             }
@@ -93,21 +95,24 @@
                     return false;
                 }
 
-                this.selected = event.target.checked;
+                const checked = event.target.checked;
+                this.currentValue = checked;
+                this.$emit('input', checked);
 
                 if (this.group) {
                     this.$parent.change(this.model);
                 } else {
-                    this.$emit('on-change', this.checked);
-                    this.$dispatch('on-form-change', this.checked);
+                    this.$emit('on-change', checked);
+                    // todo 事件
+//                    this.$dispatch('on-form-change', checked);
                 }
             },
             updateModel () {
-                this.selected = this.checked;
+                this.currentValue = this.value;
             }
         },
         watch: {
-            checked () {
+            value () {
                 this.updateModel();
             }
         }

src/components/radio/radio-group.vue

@@ -33,7 +33,7 @@
         data () {
             return {
                 currentValue: this.value
-            }
+            };
         },
         computed: {
             classes () {

src/components/radio/radio.vue

@@ -63,6 +63,7 @@
             }
         },
         mounted () {
+            // todo 使用 while向上查找
             if (this.$parent && this.$parent.$options.name === 'radioGroup') this.group = true;
             if (!this.group) {
                 this.updateValue();

src/index.js

@@ -10,7 +10,7 @@ import Button from './components/button';
 // import Card from './components/card';
 // import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
-// import Checkbox from './components/checkbox';
+import Checkbox from './components/checkbox';
 // import Circle from './components/circle';
 // import Collapse from './components/collapse';
 // import DatePicker from './components/date-picker';
@@ -60,8 +60,8 @@ const iview = {
     // Carousel,
     // CarouselItem: Carousel.Item,
     // Cascader,
-    // Checkbox,
-    // CheckboxGroup: Checkbox.Group,
+    Checkbox,
+    CheckboxGroup: Checkbox.Group,
     // Circle,
     // DatePicker,
     // Dropdown,