github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

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
parent aba8b84722 8dde5b0d24
commit cb68b3d48f
4 changed files with 39 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
examples/docs/checkbox.md
View File

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

1
packages/checkbox/src/checkbox-group.vue
View File

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

45
packages/checkbox/src/checkbox.vue
View File

@ -3,7 +3,7 @@
<span class="el-checkbox__input"> <span class="el-checkbox__input">
<span class="el-checkbox__inner" <span class="el-checkbox__inner"
:class="{ :class="{
'is-disabled': isLimit || disabled, 'is-disabled': disabled,
'is-checked': checked, 'is-checked': checked,
'is-indeterminate': indeterminate, 'is-indeterminate': indeterminate,
'is-focus': focus 'is-focus': focus
@ -18,7 +18,7 @@
type="checkbox" type="checkbox"
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
:disabled="isLimit || disabled" :disabled="disabled"
ref="checkbox"> ref="checkbox">
<input <input
v-else v-else
@ -28,7 +28,7 @@
@focus="focus = true" @focus="focus = true"
@blur="focus = false" @blur="focus = false"
type="checkbox" type="checkbox"
:disabled="isLimit || disabled"> :disabled="disabled">
</span> </span>
<span class="el-checkbox__label"> <span class="el-checkbox__label">
<slot></slot> <slot></slot>
@ -38,20 +38,7 @@
</template> </template>
<script> <script>
import Emitter from 'main/mixins/emitter'; 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 { export default {
name: 'ElCheckbox', name: 'ElCheckbox',
@ -64,12 +51,8 @@
}, },
indeterminate: Boolean, indeterminate: Boolean,
disabled: Boolean, disabled: Boolean,
trueLabel: { trueLabel: [String, Number],
default: '' falseLabel: [String, Number]
},
falseLabel: {
default: ''
}
}, },
computed: { computed: {
@ -92,7 +75,7 @@
return this._value; return this._value;
} else if (type === '[object Array]') { } else if (type === '[object Array]') {
return this._value.indexOf(this.label) > -1; 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; return this._value === this.trueLabel;
} }
} }
@ -100,26 +83,14 @@
data() { data() {
return { return {
isLimit: false,
focus: false focus: false
}; };
}, },
watch: { watch: {
checked(sure) { checked(sure) {
this.$emit('on-change', sure); this.$emit('change', sure);
this.dispatch('element.checkbox', sure);
} }
},
created() {
this.$on('element.checkbox.disabled', () => {
if (this.checked) return;
this.isLimit = true;
});
this.$on('element.checkbox.enabled', () => {
this.isLimit = false;
});
} }
}; };
</script> </script>

2
packages/tree/src/tree-node.vue
View File

@ -6,7 +6,7 @@
<span class="el-tree-node__expand-icon" <span class="el-tree-node__expand-icon"
:class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }" :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }"
></span> ></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__icon {{ node.icon }} {{ node.loading ? 'el-icon-loading' : '' }}" v-if="node.icon"></span>-->
<span class="el-tree-node__label">{{ node.label }}</span> <span class="el-tree-node__label">{{ node.label }}</span>
</div> </div>