support Checkbox

support Checkbox

CHANGE.md

@@ -4,3 +4,7 @@
 使用 v-model
 ### Radio
 value 改为了 label，使用 v-model，废弃 checked
+### Checkbox
+使用 v-model
+### CheckboxGroup
+value 改为了 label，使用 v-model，废弃 checked

README.md

@@ -22,7 +22,7 @@
 - [x] Icon
 - [x] Input
 - [x] Radio
-- [ ] Checkbox
+- [x] Checkbox
 - [ ] Switch
 - [ ] Table
 - [ ] Select

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.$emit('on-change', checked);
-                    this.$dispatch('on-form-change', this.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,
+    Checkbox,
-    // CheckboxGroup: Checkbox.Group,
+    CheckboxGroup: Checkbox.Group,
     // Circle,
     // DatePicker,
     // Dropdown,

test/app.vue

@@ -29,6 +29,7 @@ li + li {
                 <li><router-link to="/button">Button</router-link></li>
                 <li><router-link to="/input">Input</router-link></li>
                 <li><router-link to="/radio">Radio</router-link></li>
+                <li><router-link to="/checkbox">Checkbox</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>

test/main.js

@@ -36,6 +36,10 @@ const router = new VueRouter({
         {
             path: '/radio',
             component: require('./routers/radio.vue')
+        },
+        {
+            path: '/checkbox',
+            component: require('./routers/checkbox.vue')
         }
     ]
 });

test/routers/checkbox.vue

@@ -0,0 +1,95 @@
+<template>
+    <div>
+        <Checkbox v-model="single" @on-change="s">Checkbox</Checkbox>
+        {{ single }}
+        <div @click="single = !single">single-change</div>
+        <br>
+        {{ social }}
+        <Checkbox-group v-model="social" @on-change="s">
+            <Checkbox label="twitter">
+                <Icon type="social-twitter"></Icon>
+                <span>Twitter</span>
+            </Checkbox>
+            <Checkbox label="facebook">
+                <Icon type="social-facebook"></Icon>
+                <span>Facebook</span>
+            </Checkbox>
+            <Checkbox label="github">
+                <Icon type="social-github"></Icon>
+                <span>Github</span>
+            </Checkbox>
+            <Checkbox label="snapchat">
+                <Icon type="social-snapchat"></Icon>
+                <span>Snapchat</span>
+            </Checkbox>
+        </Checkbox-group>
+        <br>
+        <div @click="c">修改1</div>
+        {{ fruit }}
+        <Checkbox-group v-model="fruit">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </Checkbox-group>
+        <br><br>
+        <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
+            <Checkbox
+                    :indeterminate="indeterminate"
+                    v-model="checkAll"
+                    @click.prevent.native="handleCheckAll">全选</Checkbox>
+        </div>
+        <Checkbox-group v-model="checkAllGroup" @on-change="checkAllGroupChange">
+            <Checkbox label="香蕉"></Checkbox>
+            <Checkbox label="苹果"></Checkbox>
+            <Checkbox label="西瓜"></Checkbox>
+        </Checkbox-group>
+    </div>
+</template>
+<script>
+    export default {
+        data () {
+            return {
+                social: ['facebook', 'github'],
+                fruit: ['苹果'],
+                single: false,
+                indeterminate: true,
+                checkAll: false,
+                checkAllGroup: ['香蕉', '西瓜']
+            }
+        },
+        methods: {
+            c () {
+                this.social.splice(0, 1)
+            },
+            s (d) {
+                console.log(d)
+            },
+            handleCheckAll () {
+                if (this.indeterminate) {
+                    this.checkAll = false;
+                } else {
+                    this.checkAll = !this.checkAll;
+                }
+                this.indeterminate = false;
+
+                if (this.checkAll) {
+                    this.checkAllGroup = ['香蕉', '苹果', '西瓜'];
+                } else {
+                    this.checkAllGroup = [];
+                }
+            },
+            checkAllGroupChange (data) {
+                if (data.length === 3) {
+                    this.indeterminate = false;
+                    this.checkAll = true;
+                } else if (data.length > 0) {
+                    this.indeterminate = true;
+                    this.checkAll = false;
+                } else {
+                    this.indeterminate = false;
+                    this.checkAll = false;
+                }
+            }
+        }
+    }
+</script>