Merge pull request #308 from baiyaaaaa/fix-checkbox

fix checkbox change event && add checked prop

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## 更新日志
 
-### 1.0.0（待发布）
+### 1.0.0-rc.6（待发布）
 
 *2016-XX-XX*
 
@@ -17,6 +17,8 @@
 - 修复 多选可搜索的 Select 下拉选项自动展开的问题
 - 为 Dialog 添加 top 属性
 - 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
+- Checkbox change 事件现在只能被人为的交互操作所触发
+- 新增 Checkbox checked 属性
 
 #### 非兼容性更新
 

examples/docs/zh-cn/checkbox.md

@@ -4,16 +4,20 @@
       return {
         checkList: ['选中且禁用','复选框 A'],
         // checkList2: ['复选框 A'],
-        checked: true,
+        checked: false,
         checked1: false,
         checked2: true,
         isValid: '可用'
       };
+    },
+    methods: {
+      handleChange(ev) {
+        console.log(ev);
+      }
     }
   };
 </script>
 
-
 <style>
   .demo-box.demo-checkbox {
     .checkbox {
@@ -37,7 +41,7 @@
 ```html
 <template>
   <!-- `checked` 为 true 或 false -->
-  <el-checkbox class="checkbox" v-model="checked">备选项</el-checkbox>
+  <el-checkbox class="checkbox" v-model="checked" checked>备选项</el-checkbox>
 </template>
 <script>
   export default {
@@ -59,7 +63,7 @@
 
 ```html
 <template>
-  <el-checkbox class="checkbox" v-model="checked1" disabled>备选项</el-checkbox>
+  <el-checkbox class="checkbox" v-model="checked1" disabled>备选项1</el-checkbox>
   <el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
 </template>
 <script>
@@ -139,8 +143,10 @@
 | true-label | 选中时的值   | string, number    |       —        |     —    |
 | false-label | 没有选中时的值   | string, number    |      —         |     —    |
 | disabled  | 按钮禁用    | boolean   |  — | false   |
+| checked  | 当前是否勾选    | boolean   |  — | false   |
+| indeterminate  | 设置 indeterminate 状态，只负责样式控制    | boolean   |  — | false   |
 
 ### Checkbox-group Events
 | 事件名称      | 说明    | 回调参数      |
 |---------- |-------- |---------- |
-| change  | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
+| change  | 当绑定值变化时触发的事件 | event 事件对象 |

packages/checkbox/src/checkbox.vue

@@ -4,7 +4,7 @@
       <span class="el-checkbox__inner"
         :class="{
           'is-disabled': disabled,
-          'is-checked': checked,
+          'is-checked': isChecked,
           'is-indeterminate': indeterminate,
           'is-focus': focus
         }"
@@ -12,23 +12,25 @@
       <input
         v-if="trueLabel || falseLabel"
         class="el-checkbox__original"
+        type="checkbox"
+        :disabled="disabled"
         :true-value="trueLabel"
         :false-value="falseLabel"
         v-model="_value"
-        type="checkbox"
         @focus="focus = true"
         @blur="focus = false"
-        :disabled="disabled"
+        @change="handleChange"
         ref="checkbox">
       <input
         v-else
         class="el-checkbox__original"
+        type="checkbox"
+        :disabled="disabled"
         :value="label"
         v-model="_value"
         @focus="focus = true"
         @blur="focus = false"
-        type="checkbox"
-        :disabled="disabled">
+        @change="handleChange">
     </span>
     <span class="el-checkbox__label" v-if="$slots.default || label">
       <slot></slot>
@@ -46,11 +48,10 @@
 
     props: {
       value: {},
-      label: {
-        type: String
-      },
+      label: String,
       indeterminate: Boolean,
       disabled: Boolean,
+      checked: Boolean,
       trueLabel: [String, Number],
       falseLabel: [String, Number]
     },
@@ -58,17 +59,17 @@
     computed: {
       _value: {
         get() {
-          return this.value !== undefined ? this.value : this.$parent.value;
+          return !this.wrapInGroup ? this.value : this.$parent.value;
         },
         set(newValue) {
-          if (this.value !== undefined) {
+          if (!this.wrapInGroup) {
             this.$emit('input', newValue);
           } else {
             this.$parent.$emit('input', newValue);
           }
         }
       },
-      checked() {
+      isChecked() {
         var type = Object.prototype.toString.call(this._value);
 
         if (type === '[object Boolean]') {
@@ -83,13 +84,30 @@
 
     data() {
       return {
-        focus: false
+        focus: false,
+        wrapInGroup: this.$parent.$options._componentTag === 'el-checkbox-group'
       };
     },
 
     watch: {
-      checked(sure) {
-        this.$emit('change', sure);
+      checked: {
+        immediate: true,
+        handler(value) {
+          if (value) {
+            let type = Object.prototype.toString.call(this._value);
+            if (type !== '[object Array]') {
+              this._value = this.trueLabel || true;
+            } else {
+              this._value.push(this.label);
+            }
+          }
+        }
+      }
+    },
+
+    methods: {
+      handleChange(ev) {
+        this.$emit('change', ev);
       }
     }
   };