diff --git a/packages/collapse/__tests__/collapse.spec.ts b/packages/collapse/__tests__/collapse.spec.ts index b1f77e8f94..13ab3cccd7 100644 --- a/packages/collapse/__tests__/collapse.spec.ts +++ b/packages/collapse/__tests__/collapse.spec.ts @@ -94,6 +94,7 @@ describe('Collapse.vue', () => { }) test('event:change', async () => { + const onChange = jest.fn() const wrapper = mount({ components: { 'el-collapse': Collapse, @@ -105,7 +106,7 @@ describe('Collapse.vue', () => { } }, template: ` - +
111
@@ -120,6 +121,9 @@ describe('Collapse.vue', () => {
`, + methods: { + onChange, + }, }) const vm = wrapper.vm @@ -128,14 +132,16 @@ describe('Collapse.vue', () => { const collapseItemHeaderEls = vm.$el.querySelectorAll('.el-collapse-item__header') expect(collapseItemWrappers[0].vm.isActive).toBe(true) expect(vm.activeNames).toEqual(['1']) - + expect(onChange).not.toHaveBeenCalled() collapseItemHeaderEls[2].click() await nextTick() + expect(onChange).toHaveBeenCalledTimes(1) expect(collapseItemWrappers[0].vm.isActive).toBe(true) expect(collapseItemWrappers[2].vm.isActive).toBe(true) expect(vm.activeNames).toEqual(['1', '3']) collapseItemHeaderEls[0].click() await nextTick() + expect(onChange).toHaveBeenCalledTimes(2) expect(collapseItemWrappers[0].vm.isActive).toBe(false) expect(vm.activeNames).toEqual(['3']) }) diff --git a/packages/collapse/src/collapse.vue b/packages/collapse/src/collapse.vue index e18f02da2c..c7728a3758 100644 --- a/packages/collapse/src/collapse.vue +++ b/packages/collapse/src/collapse.vue @@ -15,6 +15,7 @@ import { onUnmounted, } from 'vue' import mitt, { Emitter } from 'mitt' +import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants' export interface CollapseProvider { activeNames: Ref @@ -31,7 +32,7 @@ export default defineComponent({ default: () => [], }, }, - emits: ['update:modelValue'], + emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT], setup(props, { emit }) { const activeNames = ref([].concat(props.modelValue)) const collapseMitt: Emitter = mitt() @@ -39,7 +40,8 @@ export default defineComponent({ const setActiveNames = _activeNames => { activeNames.value = [].concat(_activeNames) const value = props.accordion ? activeNames.value[0] : activeNames.value - emit('update:modelValue', value) + emit(UPDATE_MODEL_EVENT, value) + emit(CHANGE_EVENT, value) } const handleItemClick = name => {