mirror of https://github.com/ElemeFE/element
commit
cb68b3d48f
|
@ -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) |
|
||||
|
|
|
@ -15,6 +15,7 @@
|
|||
|
||||
watch: {
|
||||
value(value) {
|
||||
this.$emit('change', value);
|
||||
this.dispatch('form-item', 'el.form.change', value);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue