diff --git a/example/app.json b/example/app.json
index 480bc6c2..30a7e5ce 100644
--- a/example/app.json
+++ b/example/app.json
@@ -150,6 +150,7 @@
"van-rate": "./dist/rate/index",
"van-rate-demo": "./dist/rate/demo/index",
"van-collapse": "./dist/collapse/index",
+ "van-collapse-demo": "./dist/collapse/demo/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index",
"van-overlay": "./dist/overlay/index",
diff --git a/example/pages/collapse/index.js b/example/pages/collapse/index.js
index 825e50e3..cc11dfda 100644
--- a/example/pages/collapse/index.js
+++ b/example/pages/collapse/index.js
@@ -1,33 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-Page({
- data: {
- active1: [0],
- active2: 0,
- active3: [],
- active4: [],
- title1: '有赞微商城',
- title2: '有赞零售',
- title3: '有赞美业',
- content1: '提供多样店铺模板，快速搭建网上商城',
- content2:
- '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
- content3: '线上拓客，随时预约，贴心顺手的开单收银',
- },
-
- onChange(event) {
- const { key } = event.currentTarget.dataset;
- this.setData({
- [key]: event.detail,
- });
- },
-
- onOpen(event) {
- Toast(`展开: ${event.detail}`);
- },
-
- onClose(event) {
- Toast(`关闭: ${event.detail}`);
- },
-});
+Page();
diff --git a/example/pages/collapse/index.wxml b/example/pages/collapse/index.wxml
index ff484264..b6944fa0 100644
--- a/example/pages/collapse/index.wxml
+++ b/example/pages/collapse/index.wxml
@@ -1,44 +1 @@
-
-
- {{ content1 }}
- {{ content2 }}
- {{ content3 }}
-
-
-
-
-
- {{ content1 }}
- {{ content2 }}
- {{ content3 }}
-
-
-
-
-
- {{ content1 }}
- {{ content2 }}
- {{ content3 }}
-
-
-
-
-
-
-
- {{ title1 }}
-
-
- {{ content1 }}
-
-
- {{ content2 }}
-
-
-
-
-
+
diff --git a/packages/collapse/demo/index.json b/packages/collapse/demo/index.json
new file mode 100644
index 00000000..948e4036
--- /dev/null
+++ b/packages/collapse/demo/index.json
@@ -0,0 +1,9 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-collapse": "../../collapse/index",
+ "van-collapse-item": "../../collapse-item/index",
+ "van-toast": "../../toast/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/collapse/index.wxss b/packages/collapse/demo/index.less
similarity index 100%
rename from example/pages/collapse/index.wxss
rename to packages/collapse/demo/index.less
diff --git a/packages/collapse/demo/index.ts b/packages/collapse/demo/index.ts
new file mode 100644
index 00000000..fc8784fb
--- /dev/null
+++ b/packages/collapse/demo/index.ts
@@ -0,0 +1,41 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+ data: {
+ active1: [0],
+ active2: 0,
+ active3: [],
+ active4: [],
+ title1: '有赞微商城',
+ title2: '有赞零售',
+ title3: '有赞美业',
+ content1: '提供多样店铺模板，快速搭建网上商城',
+ content2:
+ '网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失',
+ content3: '线上拓客，随时预约，贴心顺手的开单收银',
+ },
+
+ methods: {
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({
+ [key]: event.detail,
+ });
+ },
+
+ onOpen(event) {
+ Toast({
+ context: this,
+ message: `展开: ${event.detail}`,
+ });
+ },
+
+ onClose(event) {
+ Toast({
+ context: this,
+ message: `关闭: ${event.detail}`,
+ });
+ },
+ },
+});
diff --git a/packages/collapse/demo/index.wxml b/packages/collapse/demo/index.wxml
new file mode 100644
index 00000000..ff484264
--- /dev/null
+++ b/packages/collapse/demo/index.wxml
@@ -0,0 +1,44 @@
+
+
+ {{ content1 }}
+ {{ content2 }}
+ {{ content3 }}
+
+
+
+
+
+ {{ content1 }}
+ {{ content2 }}
+ {{ content3 }}
+
+
+
+
+
+ {{ content1 }}
+ {{ content2 }}
+ {{ content3 }}
+
+
+
+
+
+
+
+ {{ title1 }}
+
+
+ {{ content1 }}
+
+
+ {{ content2 }}
+
+
+
+
+
diff --git a/packages/collapse/test/__snapshots__/demo.spec.ts.snap b/packages/collapse/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..e4fd18ce
--- /dev/null
+++ b/packages/collapse/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,704 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+ 有赞微商城
+
+
+
+
+
+
+
+
+
+ 提供多样店铺模板，快速搭建网上商城
+
+
+
+
+
+
+
+
+
+ 有赞零售
+
+
+
+
+
+
+
+
+
+ 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
+
+
+
+
+
+
+
+
+
+ 有赞美业
+
+
+
+
+
+
+
+
+
+ 线上拓客，随时预约，贴心顺手的开单收银
+
+
+
+
+
+
+
+
+
+
+
+ 手风琴
+
+
+
+
+
+
+
+
+ 有赞微商城
+
+
+
+
+
+
+
+
+
+ 提供多样店铺模板，快速搭建网上商城
+
+
+
+
+
+
+
+
+
+ 有赞零售
+
+
+
+
+
+
+
+
+
+ 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
+
+
+
+
+
+
+
+
+
+ 有赞美业
+
+
+
+
+
+
+
+
+
+ 线上拓客，随时预约，贴心顺手的开单收银
+
+
+
+
+
+
+
+
+
+
+
+ 事件监听
+
+
+
+
+
+
+
+
+ 有赞微商城
+
+
+
+
+
+
+
+
+
+ 提供多样店铺模板，快速搭建网上商城
+
+
+
+
+
+
+
+
+
+ 有赞零售
+
+
+
+
+
+
+
+
+
+ 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
+
+
+
+
+
+
+
+
+
+ 有赞美业
+
+
+
+
+
+
+
+
+
+ 线上拓客，随时预约，贴心顺手的开单收银
+
+
+
+
+
+
+
+
+
+
+
+ 自定义标题内容
+
+
+
+
+
+
+
+
+
+
+ 有赞微商城
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 提供多样店铺模板，快速搭建网上商城
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 有赞零售
+
+
+ 内容
+
+
+
+
+
+
+
+
+
+ 网店吸粉获客、会员分层营销、一机多种收款，告别经营低效和客户流失
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/collapse/test/demo.spec.ts b/packages/collapse/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/collapse/test/demo.spec.ts
@@ -0,0 +1,11 @@
+import path from 'path';
+import simulate from 'miniprogram-simulate';
+
+test('should render demo and match snapshot', () => {
+ const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
+ rootPath: path.resolve(__dirname, '../../'),
+ });
+ const comp = simulate.render(id);
+ comp.attach(document.createElement('parent-wrapper'));
+ expect(comp.toJSON()).toMatchSnapshot();
+});