mirror of https://github.com/ElemeFE/element
fix checkbox change event && add checked prop
parent
30003ec594
commit
d7fb7ff588
|
@ -1,6 +1,6 @@
|
||||||
## 更新日志
|
## 更新日志
|
||||||
|
|
||||||
### 1.0.0(待发布)
|
### 1.0.0-rc.6(待发布)
|
||||||
|
|
||||||
*2016-XX-XX*
|
*2016-XX-XX*
|
||||||
|
|
||||||
|
@ -16,6 +16,8 @@
|
||||||
- 新增 DatePicker 禁用日期功能 #253
|
- 新增 DatePicker 禁用日期功能 #253
|
||||||
- 修复 多选可搜索的 Select 下拉选项自动展开的问题
|
- 修复 多选可搜索的 Select 下拉选项自动展开的问题
|
||||||
- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
|
- 修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295
|
||||||
|
- Checkbox change 事件现在只能被人为的交互操作所触发
|
||||||
|
- 新增 Checkbox checked 属性
|
||||||
|
|
||||||
#### 非兼容性更新
|
#### 非兼容性更新
|
||||||
|
|
||||||
|
|
|
@ -4,16 +4,20 @@
|
||||||
return {
|
return {
|
||||||
checkList: ['选中且禁用','复选框 A'],
|
checkList: ['选中且禁用','复选框 A'],
|
||||||
// checkList2: ['复选框 A'],
|
// checkList2: ['复选框 A'],
|
||||||
checked: true,
|
checked: false,
|
||||||
checked1: false,
|
checked1: false,
|
||||||
checked2: true,
|
checked2: true,
|
||||||
isValid: '可用'
|
isValid: '可用'
|
||||||
};
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleChange(ev) {
|
||||||
|
console.log(ev);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.demo-box.demo-checkbox {
|
.demo-box.demo-checkbox {
|
||||||
.checkbox {
|
.checkbox {
|
||||||
|
@ -37,7 +41,7 @@
|
||||||
```html
|
```html
|
||||||
<template>
|
<template>
|
||||||
<!-- `checked` 为 true 或 false -->
|
<!-- `checked` 为 true 或 false -->
|
||||||
<el-checkbox class="checkbox" v-model="checked">备选项</el-checkbox>
|
<el-checkbox class="checkbox" v-model="checked" checked>备选项</el-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
|
@ -59,7 +63,7 @@
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<template>
|
<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>
|
<el-checkbox class="checkbox" v-model="checked2" disabled>备选项</el-checkbox>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
@ -139,8 +143,10 @@
|
||||||
| true-label | 选中时的值 | string, number | — | — |
|
| true-label | 选中时的值 | string, number | — | — |
|
||||||
| false-label | 没有选中时的值 | string, number | — | — |
|
| false-label | 没有选中时的值 | string, number | — | — |
|
||||||
| disabled | 按钮禁用 | boolean | — | false |
|
| disabled | 按钮禁用 | boolean | — | false |
|
||||||
|
| checked | 当前是否勾选 | boolean | — | false |
|
||||||
|
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | — | false |
|
||||||
|
|
||||||
### Checkbox-group Events
|
### Checkbox-group Events
|
||||||
| 事件名称 | 说明 | 回调参数 |
|
| 事件名称 | 说明 | 回调参数 |
|
||||||
|---------- |-------- |---------- |
|
|---------- |-------- |---------- |
|
||||||
| change | 当绑定值变化时触发的事件 | 选中的 Checkbox Label 值 |
|
| change | 当绑定值变化时触发的事件 | event 事件对象 |
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
<span class="el-checkbox__inner"
|
<span class="el-checkbox__inner"
|
||||||
:class="{
|
:class="{
|
||||||
'is-disabled': disabled,
|
'is-disabled': disabled,
|
||||||
'is-checked': checked,
|
'is-checked': isChecked,
|
||||||
'is-indeterminate': indeterminate,
|
'is-indeterminate': indeterminate,
|
||||||
'is-focus': focus
|
'is-focus': focus
|
||||||
}"
|
}"
|
||||||
|
@ -12,23 +12,25 @@
|
||||||
<input
|
<input
|
||||||
v-if="trueLabel || falseLabel"
|
v-if="trueLabel || falseLabel"
|
||||||
class="el-checkbox__original"
|
class="el-checkbox__original"
|
||||||
|
type="checkbox"
|
||||||
|
:disabled="disabled"
|
||||||
:true-value="trueLabel"
|
:true-value="trueLabel"
|
||||||
:false-value="falseLabel"
|
:false-value="falseLabel"
|
||||||
v-model="_value"
|
v-model="_value"
|
||||||
type="checkbox"
|
|
||||||
@focus="focus = true"
|
@focus="focus = true"
|
||||||
@blur="focus = false"
|
@blur="focus = false"
|
||||||
:disabled="disabled"
|
@change="handleChange"
|
||||||
ref="checkbox">
|
ref="checkbox">
|
||||||
<input
|
<input
|
||||||
v-else
|
v-else
|
||||||
class="el-checkbox__original"
|
class="el-checkbox__original"
|
||||||
|
type="checkbox"
|
||||||
|
:disabled="disabled"
|
||||||
:value="label"
|
:value="label"
|
||||||
v-model="_value"
|
v-model="_value"
|
||||||
@focus="focus = true"
|
@focus="focus = true"
|
||||||
@blur="focus = false"
|
@blur="focus = false"
|
||||||
type="checkbox"
|
@change="handleChange">
|
||||||
:disabled="disabled">
|
|
||||||
</span>
|
</span>
|
||||||
<span class="el-checkbox__label" v-if="$slots.default || label">
|
<span class="el-checkbox__label" v-if="$slots.default || label">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -46,11 +48,10 @@
|
||||||
|
|
||||||
props: {
|
props: {
|
||||||
value: {},
|
value: {},
|
||||||
label: {
|
label: String,
|
||||||
type: String
|
|
||||||
},
|
|
||||||
indeterminate: Boolean,
|
indeterminate: Boolean,
|
||||||
disabled: Boolean,
|
disabled: Boolean,
|
||||||
|
checked: Boolean,
|
||||||
trueLabel: [String, Number],
|
trueLabel: [String, Number],
|
||||||
falseLabel: [String, Number]
|
falseLabel: [String, Number]
|
||||||
},
|
},
|
||||||
|
@ -58,17 +59,17 @@
|
||||||
computed: {
|
computed: {
|
||||||
_value: {
|
_value: {
|
||||||
get() {
|
get() {
|
||||||
return this.value !== undefined ? this.value : this.$parent.value;
|
return !this.wrapInGroup ? this.value : this.$parent.value;
|
||||||
},
|
},
|
||||||
set(newValue) {
|
set(newValue) {
|
||||||
if (this.value !== undefined) {
|
if (!this.wrapInGroup) {
|
||||||
this.$emit('input', newValue);
|
this.$emit('input', newValue);
|
||||||
} else {
|
} else {
|
||||||
this.$parent.$emit('input', newValue);
|
this.$parent.$emit('input', newValue);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
checked() {
|
isChecked() {
|
||||||
var type = Object.prototype.toString.call(this._value);
|
var type = Object.prototype.toString.call(this._value);
|
||||||
|
|
||||||
if (type === '[object Boolean]') {
|
if (type === '[object Boolean]') {
|
||||||
|
@ -83,13 +84,30 @@
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
focus: false
|
focus: false,
|
||||||
|
wrapInGroup: this.$parent.$options._componentTag === 'el-checkbox-group'
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
watch: {
|
watch: {
|
||||||
checked(sure) {
|
checked: {
|
||||||
this.$emit('change', sure);
|
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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue