diff --git a/packages/collapse-item/index.js b/packages/collapse-item/index.js index c61512640..cc6c2bbf5 100644 --- a/packages/collapse-item/index.js +++ b/packages/collapse-item/index.js @@ -80,11 +80,16 @@ export default sfc({ return; } - const contentHeight = `${content.clientHeight}px`; - wrapper.style.height = expanded ? 0 : contentHeight; - raf(() => { - wrapper.style.height = expanded ? contentHeight : 0; - }); + const { clientHeight } = content; + if (clientHeight) { + const contentHeight = `${clientHeight}px`; + wrapper.style.height = expanded ? 0 : contentHeight; + raf(() => { + wrapper.style.height = expanded ? contentHeight : 0; + }); + } else { + this.onTransitionEnd(); + } }); } }, diff --git a/packages/collapse/test/__snapshots__/index.spec.js.snap b/packages/collapse/test/__snapshots__/index.spec.js.snap index ba6f0fc48..b03051f99 100644 --- a/packages/collapse/test/__snapshots__/index.spec.js.snap +++ b/packages/collapse/test/__snapshots__/index.spec.js.snap @@ -23,6 +23,26 @@ exports[`disable border 1`] = ` `; +exports[`lazy render collapse content 1`] = ` +
+
+
+
a
+ +
+
+
+
+
b
+ +
+
+
content
+
+
+
+`; + exports[`render collapse-item slot 1`] = `
diff --git a/packages/collapse/test/index.spec.js b/packages/collapse/test/index.spec.js index 6741f3dba..91ff06488 100644 --- a/packages/collapse/test/index.spec.js +++ b/packages/collapse/test/index.spec.js @@ -46,7 +46,7 @@ test('basic mode', async () => { wrapper.destroy(); }); -it('accordion', async () => { +test('accordion', async () => { const wrapper = mount(component, { propsData: { accordion: true @@ -68,7 +68,7 @@ it('accordion', async () => { expect(wrapper.vm.active).toEqual(''); }); -it('render collapse-item slot', () => { +test('render collapse-item slot', () => { const wrapper = mount({ template: ` @@ -94,7 +94,7 @@ it('render collapse-item slot', () => { expect(wrapper).toMatchSnapshot(); }); -it('disable border', () => { +test('disable border', () => { const wrapper = mount(component, { propsData: { border: false @@ -103,3 +103,32 @@ it('disable border', () => { expect(wrapper).toMatchSnapshot(); }); + +test('lazy render collapse content', async () => { + const wrapper = mount({ + template: ` + + content + {{ content }} + + `, + components: { + Collapse, + CollapseItem + }, + data() { + return { + content: '', + active: [] + }; + } + }); + + const titles = wrapper.findAll('.van-collapse-item__title'); + + titles.at(1).trigger('click'); + await later(50); + + wrapper.vm.content = 'content'; + expect(wrapper).toMatchSnapshot(); +});