test/element
1
0
Fork 0
mirror of https://gitee.com/ElemeFE/element.git synced 2024-12-02 12:18:46 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Checkbox: change event only triggers on user input

Browse Source
This commit is contained in:
Leopoldthecoder 2017-08-12 23:11:11 +08:00 committed by 杨奕
parent 77ddecea25
commit 2250162553
9 changed files with 186 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/docs/en-US/checkbox.md
View File

@ -23,8 +23,8 @@
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -234,6 +234,11 @@ Checkbox with button styles.
| checked | if the checkbox is checked | boolean | — | false |
| indeterminate | same as `indeterminate` in native checkbox | boolean | — | false |
### Checkbox Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | the updated value |
### Checkbox-group Attributes
| Attribute | Description | Type | Options | Default|
|---------- |-------- |---------- |------------- |-------- |
@ -243,8 +248,7 @@ Checkbox with button styles.
| min | minimum number of checkbox checked | number | — | — |
| max | maximum number of checkbox checked | number | — | — |
### Checkbox Events
### Checkbox-group Events
| Event Name | Description | Parameters |
|---------- |-------- |---------- |
| change | triggers when the binding value changes | Event object |
| change | triggers when the binding value changes | the updated value |

13
examples/docs/zh-CN/checkbox.md
View File

@ -23,8 +23,8 @@
handleChange(ev) {
console.log(ev);
},
handleCheckAllChange(event) {
this.checkedCities = event.target.checked ? cityOptions : [];
handleCheckAllChange(val) {
this.checkedCities = val ? cityOptions : [];
this.isIndeterminate = false;
},
handleCheckedCitiesChange(value) {
@ -245,6 +245,11 @@
| checked | 当前是否勾选 | boolean | — | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | — | false |
### Checkbox Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | 更新后的值 |
### Checkbox-group Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---------- |-------- |---------- |------------- |-------- |
@ -254,7 +259,7 @@
| min | 可被勾选的 checkbox 的最小数量 | number | — | — |
| max | 可被勾选的 checkbox 的最大数量 | number | — | — |
### Checkbox Events
### Checkbox-group Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| change | 当绑定值变化时触发的事件 | event 事件对象 |
| change | 当绑定值变化时触发的事件 | 更新后的值 |

22
packages/checkbox/src/checkbox-button.vue
View File

@ -54,7 +54,8 @@
data() {
return {
selfModel: false,
focus: false
focus: false,
isLimitExceeded: false
};
},
@ -77,16 +78,16 @@
set(val) {
if (this._checkboxGroup) {
let isLimitExceeded = false;
this.isLimitExceeded = false;
(this._checkboxGroup.min !== undefined &&
val.length < this._checkboxGroup.min &&
(isLimitExceeded = true));
(this.isLimitExceeded = true));
(this._checkboxGroup.max !== undefined &&
val.length > this._checkboxGroup.max &&
(isLimitExceeded = true));
(this.isLimitExceeded = true));
isLimitExceeded === false &&
this.isLimitExceeded === false &&
this.dispatch('ElCheckboxGroup', 'input', [val]);
} else if (this.value !== undefined) {
this.$emit('input', val);
@ -148,12 +149,13 @@
}
},
handleChange(ev) {
this.$emit('change', ev);
if (this._checkboxGroup) {
this.$nextTick(_ => {
this.$nextTick(() => {
if (this.isLimitExceeded) return;
this.$emit('change', this.model, ev);
if (this._checkboxGroup) {
this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
});
}
}
});
}
},

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

@ -59,7 +59,8 @@
data() {
return {
selfModel: false,
focus: false
focus: false,
isLimitExceeded: false
};
},
@ -73,16 +74,16 @@
set(val) {
if (this.isGroup) {
let isLimitExceeded = false;
this.isLimitExceeded = false;
(this._checkboxGroup.min !== undefined &&
val.length < this._checkboxGroup.min &&
(isLimitExceeded = true));
(this.isLimitExceeded = true));
(this._checkboxGroup.max !== undefined &&
val.length > this._checkboxGroup.max &&
(isLimitExceeded = true));
(this.isLimitExceeded = true));
isLimitExceeded === false &&
this.isLimitExceeded === false &&
this.dispatch('ElCheckboxGroup', 'input', [val]);
} else {
this.$emit('input', val);
@ -144,12 +145,13 @@
}
},
handleChange(ev) {
this.$emit('change', ev);
if (this.isGroup) {
this.$nextTick(_ => {
this.$nextTick(() => {
if (this.isLimitExceeded) return;
this.$emit('change', this.model, ev);
if (this.isGroup) {
this.dispatch('ElCheckboxGroup', 'change', [this._checkboxGroup.value]);
});
}
}
});
}
},

2
packages/transfer/src/transfer-panel.vue
View File

@ -215,7 +215,7 @@
},
handleAllCheckedChange(value) {
this.checked = value.target.checked
this.checked = value
? this.checkableData.map(item => item[this.keyProp])
: [];
},

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

@ -157,7 +157,7 @@
}
},
handleCheckChange(ev) {
handleCheckChange(value, ev) {
this.node.setChecked(ev.target.checked, !this.tree.checkStrictly);
},

1
test/unit/specs/cascader.spec.js
View File

@ -601,7 +601,6 @@ describe('Cascader', () => {
expect(menuElm.children.length).to.be.equal(1);
expect(menuElm.children[0].children.length).to.be.equal(3);
done();
item1.click();

120
test/unit/specs/checkbox.spec.js
View File

@ -44,6 +44,35 @@ describe('Checkbox', () => {
let checkboxElm = vm.$el;
expect(checkboxElm.querySelector('.is-disabled')).to.be.ok;
});
it('change event', done => {
vm = createVue({
template: `
<el-checkbox v-model="checked" @change="onChange">
</el-checkbox>
`,
methods: {
onChange(val) {
this.data = val;
}
},
data() {
return {
data: '',
checked: false
};
}
}, true);
let checkboxElm = vm.$el;
checkboxElm.click();
setTimeout(_ => {
expect(vm.data).to.true;
vm.checked = false;
setTimeout(_ => {
expect(vm.data).to.true;
done();
}, 10);
}, 10);
});
it('checkbox group', done => {
vm = createVue({
template: `
@ -68,6 +97,34 @@ describe('Checkbox', () => {
});
});
it('checkbox group change event', done => {
vm = createVue({
template: `
<el-checkbox-group v-model="checkList" @change="onChange">
<el-checkbox label="a" ref="a"></el-checkbox>
<el-checkbox label="b" ref="b"></el-checkbox>
</el-checkbox-group>
`,
methods: {
onChange(val) {
this.data = val;
}
},
data() {
return {
data: '',
checkList: []
};
}
}, true);
vm.$refs.a.$el.click();
setTimeout(_ => {
expect(vm.data).to.deep.equal(['a']);
vm.checkList = ['b'];
done();
}, 10);
});
it('checkbox group minimum and maximum', done => {
vm = createVue({
template: `
@ -216,6 +273,36 @@ describe('Checkbox', () => {
expect(checkboxElm.classList.contains('is-disabled')).to.be.ok;
});
it('change event', done => {
vm = createVue({
template: `
<el-checkbox-button v-model="checked" @change="onChange">
</el-checkbox-button>
`,
methods: {
onChange(val) {
this.data = val;
}
},
data() {
return {
data: '',
checked: false
};
}
}, true);
let checkboxElm = vm.$el;
checkboxElm.click();
setTimeout(_ => {
expect(vm.data).to.true;
vm.checked = false;
setTimeout(_ => {
expect(vm.data).to.true;
done();
}, 10);
}, 10);
});
it('checkbox group', done => {
vm = createVue({
template: `
@ -245,6 +332,39 @@ describe('Checkbox', () => {
});
});
it('checkbox-button group change event', done => {
vm = createVue({
template: `
<el-checkbox-group v-model="checkList" @change="onChange">
<el-checkbox-button label="a" ref="a"></el-checkbox-button>
<el-checkbox-button label="b" ref="b"></el-checkbox-button>
<el-checkbox-button label="c" ref="c"></el-checkbox-button>
<el-checkbox-button label="d" ref="d"></el-checkbox-button>
</el-checkbox-group>
`,
methods: {
onChange(val) {
this.data = val;
}
},
data() {
return {
data: '',
checkList: []
};
}
}, true);
vm.$refs.a.$el.click();
setTimeout(_ => {
expect(vm.data).to.deep.equal(['a']);
vm.checkList = ['b'];
setTimeout(_ => {
expect(vm.data).to.deep.equal(['a']);
done();
}, 10);
}, 10);
});
it('checkbox group props', () => {
vm = createVue({
template: `

38
test/unit/specs/tree.spec.js
View File

@ -299,16 +299,20 @@ describe('Tree', () => {
const nodeCheckbox = secondNode.querySelector('.el-checkbox');
expect(nodeCheckbox).to.be.exist;
nodeCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2);
secondNode.querySelector('.el-tree-node__expand-icon').click();
setTimeout(() => {
const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
leafCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(1);
done();
}, 100);
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2);
secondNode.querySelector('.el-tree-node__expand-icon').click();
setTimeout(() => {
const firstLeaf = secondNode.nextElementSibling.querySelector('.el-tree-node__content');
const leafCheckbox = firstLeaf.querySelector('.el-checkbox');
leafCheckbox.click();
setTimeout(() => {
expect(tree.getCheckedNodes().length).to.equal(1);
done();
}, 10);
}, 10);
}, 10);
});
it('setCheckedNodes', (done) => {
@ -317,13 +321,15 @@ describe('Tree', () => {
const secondNode = document.querySelectorAll('.el-tree-node__content')[1];
const nodeCheckbox = secondNode.querySelector('.el-checkbox');
nodeCheckbox.click();
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2);
vm.$nextTick(() => {
tree.setCheckedNodes([]);
expect(tree.getCheckedNodes().length).to.equal(0);
done();
});
setTimeout(() => {
expect(tree.getCheckedNodes().length).to.equal(3);
expect(tree.getCheckedNodes(true).length).to.equal(2);
setTimeout(() => {
tree.setCheckedNodes([]);
expect(tree.getCheckedNodes().length).to.equal(0);
done();
}, 10);
}, 10);
});
it('setCheckedKeys', () => {