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`] = `
+
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();
+});