Merge pull request #65 from eleme/feat/checkbox

fix checkbox
pull/2/head
FuryBean 2016-08-15 15:24:26 +08:00 committed by GitHub
commit cb68b3d48f
4 changed files with 39 additions and 52 deletions

View File

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

View File

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

View File

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

View File

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