mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2024-12-27 03:01:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(collapse): fix collapse not emitting change (#949)

Browse Source 
- Add emit when active changes
This commit is contained in:
jeremywu 2020-12-10 16:17:48 +08:00 committed by GitHub
parent 46a20e9e05
commit 5c144d2c4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/collapse/__tests__/collapse.spec.ts
View File

@ -94,6 +94,7 @@ describe('Collapse.vue', () => {
}) })
test('event:change', async () => { test('event:change', async () => {
const onChange = jest.fn()
const wrapper = mount({ const wrapper = mount({
components: { components: {
'el-collapse': Collapse, 'el-collapse': Collapse,
@ -105,7 +106,7 @@ describe('Collapse.vue', () => {
} }
}, },
template: ` template: `
<el-collapse v-model="activeNames"> <el-collapse v-model="activeNames" @change="onChange">
<el-collapse-item title="title1" name="1"> <el-collapse-item title="title1" name="1">
<div class="content">111</div> <div class="content">111</div>
</el-collapse-item> </el-collapse-item>
@ -120,6 +121,9 @@ describe('Collapse.vue', () => {
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
`, `,
methods: {
onChange,
},
}) })
const vm = wrapper.vm const vm = wrapper.vm
@ -128,14 +132,16 @@ describe('Collapse.vue', () => {
const collapseItemHeaderEls = vm.$el.querySelectorAll('.el-collapse-item__header') const collapseItemHeaderEls = vm.$el.querySelectorAll('.el-collapse-item__header')
expect(collapseItemWrappers[0].vm.isActive).toBe(true) expect(collapseItemWrappers[0].vm.isActive).toBe(true)
expect(vm.activeNames).toEqual(['1']) expect(vm.activeNames).toEqual(['1'])
expect(onChange).not.toHaveBeenCalled()
collapseItemHeaderEls[2].click() collapseItemHeaderEls[2].click()
await nextTick() await nextTick()
expect(onChange).toHaveBeenCalledTimes(1)
expect(collapseItemWrappers[0].vm.isActive).toBe(true) expect(collapseItemWrappers[0].vm.isActive).toBe(true)
expect(collapseItemWrappers[2].vm.isActive).toBe(true) expect(collapseItemWrappers[2].vm.isActive).toBe(true)
expect(vm.activeNames).toEqual(['1', '3']) expect(vm.activeNames).toEqual(['1', '3'])
collapseItemHeaderEls[0].click() collapseItemHeaderEls[0].click()
await nextTick() await nextTick()
expect(onChange).toHaveBeenCalledTimes(2)
expect(collapseItemWrappers[0].vm.isActive).toBe(false) expect(collapseItemWrappers[0].vm.isActive).toBe(false)
expect(vm.activeNames).toEqual(['3']) expect(vm.activeNames).toEqual(['3'])
}) })

6
packages/collapse/src/collapse.vue
View File

@ -15,6 +15,7 @@ import {
onUnmounted, onUnmounted,
} from 'vue' } from 'vue'
import mitt, { Emitter } from 'mitt' import mitt, { Emitter } from 'mitt'
import { UPDATE_MODEL_EVENT, CHANGE_EVENT } from '@element-plus/utils/constants'
export interface CollapseProvider { export interface CollapseProvider {
activeNames: Ref activeNames: Ref
@ -31,7 +32,7 @@ export default defineComponent({
default: () => [], default: () => [],
}, },
}, },
emits: ['update:modelValue'], emits: [UPDATE_MODEL_EVENT, CHANGE_EVENT],
setup(props, { emit }) { setup(props, { emit }) {
const activeNames = ref([].concat(props.modelValue)) const activeNames = ref([].concat(props.modelValue))
const collapseMitt: Emitter = mitt() const collapseMitt: Emitter = mitt()
@ -39,7 +40,8 @@ export default defineComponent({
const setActiveNames = _activeNames => { const setActiveNames = _activeNames => {
activeNames.value = [].concat(_activeNames) activeNames.value = [].concat(_activeNames)
const value = props.accordion ? activeNames.value[0] : activeNames.value 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 => { const handleItemClick = name => {