Merge pull request #65 from eleme/feat/checkbox

fix checkbox

examples/docs/checkbox.md

@@ -41,22 +41,26 @@
 ### 多个勾选框，绑定到同一个数组
 
 <div class="demo-box demo-checkbox">
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
+<el-checkbox-group v-model="checkList">
+  <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
+  <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
+  <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
+  <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
+  <el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
+</el-checkbox-group>
 </div>
 
 <p>{{ checkList }}</p>
 
 ```html
 <template>
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 A"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 B"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="复选框 C"></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="禁用" disabled></el-checkbox>
-  <el-checkbox class="checkbox" v-model="checkList" label="选中且禁用" disabled></el-checkbox>
+  <el-checkbox-group v-model="checkList">
+    <el-checkbox class="checkbox" label="复选框 A"></el-checkbox>
+    <el-checkbox class="checkbox" label="复选框 B"></el-checkbox>
+    <el-checkbox class="checkbox" label="复选框 C"></el-checkbox>
+    <el-checkbox class="checkbox" label="禁用" disabled></el-checkbox>
+    <el-checkbox class="checkbox" label="选中且禁用" disabled></el-checkbox>
+  </el-checkbox-group>
 </template>
 
 <script>
@@ -101,10 +105,21 @@ vm.name === vm.a
 vm.name === vm.b
 ```
 
-## API
+## checkbox API
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
-| model     | 绑定值   | string\|string[]\|boolean  |               |         |
-| value     | 真实值   | string    |               |         |
-| label     | 显示值，不填则显示 value   | string    |               |         |
+| value     | 绑定值   | string\|string[]\|boolean  |    |    |
+| label     | 真实值   | string    |               |         |
+| true-label | 选中时的真实值   | string    |               |         |
+| true-label | 没有选中时的真实值   | string    |               |         |
 | disabled  | 禁用    | boolean   | true, false   | false   |
+
+## checkbox group API
+| 参数      | 说明    | 类型      | 可选值       | 默认值   |
+|---------- |-------- |---------- |-------------  |-------- |
+| value     | 绑定值   | string\|string[]\|boolean    |               |         |
+
+## checkbox group 事件
+| 事件名称      | 说明    | 回调参数      |
+|---------- |-------- |---------- |
+| change  | 当绑定值变化时触发的事件 | (value: string) |

packages/checkbox/src/checkbox-group.vue

@@ -15,6 +15,7 @@
 
     watch: {
       value(value) {
+        this.$emit('change', value);
         this.dispatch('form-item', 'el.form.change', value);
       }
     }

packages/checkbox/src/checkbox.vue

@@ -3,7 +3,7 @@
     <span class="el-checkbox__input">
       <span class="el-checkbox__inner"
         :class="{
-          'is-disabled': isLimit || disabled,
+          'is-disabled': disabled,
           'is-checked': checked,
           'is-indeterminate': indeterminate,
           'is-focus': focus
@@ -18,7 +18,7 @@
         type="checkbox"
         @focus="focus = true"
         @blur="focus = false"
-        :disabled="isLimit || disabled"
+        :disabled="disabled"
         ref="checkbox">
       <input
         v-else
@@ -28,7 +28,7 @@
         @focus="focus = true"
         @blur="focus = false"
         type="checkbox"
-        :disabled="isLimit || disabled">
+        :disabled="disabled">
     </span>
     <span class="el-checkbox__label">
       <slot></slot>
@@ -38,20 +38,7 @@
 </template>
 <script>
   import Emitter from 'main/mixins/emitter';
-  /**
-   * checkbox
-   * @module components/basic/checkbox
-   * @desc 多选按钮
-   * @param {string[]} value - 绑定值
-   * @param {string} value - 真实值
-   * @param {string} [label] - 显示值
-   * @param {boolean} [disabled=false] - 是否禁用
-   *
-   * @example
-   * <el-checkbox :value.sync="data" value="Jack"></el-checkbox>
-   * <el-checkbox :value.sync="data" value="John"></el-checkbox>
-   * <el-checkbox :value.sync="data" value="Mike" disabled></el-checkbox>
-   */
+
   export default {
     name: 'ElCheckbox',
 
@@ -64,12 +51,8 @@
       },
       indeterminate: Boolean,
       disabled: Boolean,
-      trueLabel: {
-        default: ''
-      },
-      falseLabel: {
-        default: ''
-      }
+      trueLabel: [String, Number],
+      falseLabel: [String, Number]
     },
 
     computed: {
@@ -92,7 +75,7 @@
           return this._value;
         } else if (type === '[object Array]') {
           return this._value.indexOf(this.label) > -1;
-        } else if (type === '[object String]') {
+        } else if (type === '[object String]' || type === '[object Number]') {
           return this._value === this.trueLabel;
         }
       }
@@ -100,26 +83,14 @@
 
     data() {
       return {
-        isLimit: false,
         focus: false
       };
     },
 
     watch: {
       checked(sure) {
-        this.$emit('on-change', sure);
-        this.dispatch('element.checkbox', sure);
+        this.$emit('change', sure);
       }
-    },
-
-    created() {
-      this.$on('element.checkbox.disabled', () => {
-        if (this.checked) return;
-        this.isLimit = true;
-      });
-      this.$on('element.checkbox.enabled', () => {
-        this.isLimit = false;
-      });
     }
   };
 </script>

packages/tree/src/tree-node.vue

@@ -6,7 +6,7 @@
       <span class="el-tree-node__expand-icon"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
         ></span>
-      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @on-change="handleCheckChange"></el-checkbox>
+      <el-checkbox v-if="showCheckbox" :indeterminate="node.indeterminate" v-model="node.checked" :true-label="true" :false-label="false" @change="handleCheckChange"></el-checkbox>
       <!--<span class="el-tree-node__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
       <span class="el-tree-node__label">{{ node.label }}</span>
     </div>