diff --git a/example/app.json b/example/app.json
index c12edc94..9c15ec03 100644
--- a/example/app.json
+++ b/example/app.json
@@ -103,6 +103,7 @@
"van-panel": "./dist/panel/index",
"van-panel-demo": "./dist/panel/demo/index",
"van-popup": "./dist/popup/index",
+ "van-popup-demo": "./dist/popup/demo/index",
"van-progress": "./dist/progress/index",
"van-radio": "./dist/radio/index",
"van-radio-demo": "./dist/radio/demo/index",
diff --git a/example/pages/popup/index.js b/example/pages/popup/index.js
index d68ea2e5..cc11dfda 100644
--- a/example/pages/popup/index.js
+++ b/example/pages/popup/index.js
@@ -1,95 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- show: {
- basic: false,
- top: false,
- bottom: false,
- left: false,
- right: false,
- round: false,
- closeIcon: false,
- customCloseIcon: false,
- customIconPosition: false
- }
- },
-
- toggle(type, show) {
- this.setData({
- [`show.${type}`]: show
- });
- },
-
- showBasic() {
- this.toggle('basic', true);
- },
-
- hideBasic() {
- this.toggle('basic', false);
- },
-
- showTop() {
- this.toggle('top', true);
- },
-
- hideTop() {
- this.toggle('top', false);
- },
-
- showLeft() {
- this.toggle('left', true);
- },
-
- hideLeft() {
- this.toggle('left', false);
- },
-
- showRight() {
- this.toggle('right', true);
- },
-
- hideRight() {
- this.toggle('right', false);
- },
-
- showBottom() {
- this.toggle('bottom', true);
- },
-
- hideBottom() {
- this.toggle('bottom', false);
- },
-
- showRound() {
- this.toggle('round', true);
- },
-
- hideRound() {
- this.toggle('round', false);
- },
-
- showCloseIcon() {
- this.toggle('closeIcon', true);
- },
-
- hideCloseIcon() {
- this.toggle('closeIcon', false);
- },
-
- showCustomCloseIcon() {
- this.toggle('customCloseIcon', true);
- },
-
- hideCustomCloseIcon() {
- this.toggle('customCloseIcon', false);
- },
-
- showCustomIconPosition() {
- this.toggle('customIconPosition', true);
- },
-
- hideCustomIconPosition() {
- this.toggle('customIconPosition', false);
- }
-});
+Page();
diff --git a/example/pages/popup/index.wxml b/example/pages/popup/index.wxml
index 5f98c12b..fd33a985 100644
--- a/example/pages/popup/index.wxml
+++ b/example/pages/popup/index.wxml
@@ -1,86 +1 @@
-
-
-
- 内容
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/popup/demo/index.json b/packages/popup/demo/index.json
new file mode 100644
index 00000000..0707f326
--- /dev/null
+++ b/packages/popup/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-cell": "../../cell/index",
+ "van-popup": "../../popup/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/popup/demo/index.ts b/packages/popup/demo/index.ts
new file mode 100644
index 00000000..132f399b
--- /dev/null
+++ b/packages/popup/demo/index.ts
@@ -0,0 +1,97 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ show: {
+ basic: false,
+ top: false,
+ bottom: false,
+ left: false,
+ right: false,
+ round: false,
+ closeIcon: false,
+ customCloseIcon: false,
+ customIconPosition: false,
+ },
+ },
+
+ methods: {
+ toggle(type, show) {
+ this.setData({
+ [`show.${type}`]: show,
+ });
+ },
+
+ showBasic() {
+ this.toggle('basic', true);
+ },
+
+ hideBasic() {
+ this.toggle('basic', false);
+ },
+
+ showTop() {
+ this.toggle('top', true);
+ },
+
+ hideTop() {
+ this.toggle('top', false);
+ },
+
+ showLeft() {
+ this.toggle('left', true);
+ },
+
+ hideLeft() {
+ this.toggle('left', false);
+ },
+
+ showRight() {
+ this.toggle('right', true);
+ },
+
+ hideRight() {
+ this.toggle('right', false);
+ },
+
+ showBottom() {
+ this.toggle('bottom', true);
+ },
+
+ hideBottom() {
+ this.toggle('bottom', false);
+ },
+
+ showRound() {
+ this.toggle('round', true);
+ },
+
+ hideRound() {
+ this.toggle('round', false);
+ },
+
+ showCloseIcon() {
+ this.toggle('closeIcon', true);
+ },
+
+ hideCloseIcon() {
+ this.toggle('closeIcon', false);
+ },
+
+ showCustomCloseIcon() {
+ this.toggle('customCloseIcon', true);
+ },
+
+ hideCustomCloseIcon() {
+ this.toggle('customCloseIcon', false);
+ },
+
+ showCustomIconPosition() {
+ this.toggle('customIconPosition', true);
+ },
+
+ hideCustomIconPosition() {
+ this.toggle('customIconPosition', false);
+ },
+ },
+});
diff --git a/packages/popup/demo/index.wxml b/packages/popup/demo/index.wxml
new file mode 100644
index 00000000..5f98c12b
--- /dev/null
+++ b/packages/popup/demo/index.wxml
@@ -0,0 +1,86 @@
+
+
+
+ 内容
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/popup/test/__snapshots__/demo.spec.ts.snap b/packages/popup/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..40d10ab8
--- /dev/null
+++ b/packages/popup/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,446 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+ 展示弹出层
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 弹出位置
+
+
+
+
+ 顶部弹出
+
+
+
+
+
+
+
+
+
+
+ 底部弹出
+
+
+
+
+
+
+
+
+
+
+ 左侧弹出
+
+
+
+
+
+
+
+
+
+
+ 右侧弹出
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 关闭图标
+
+
+
+
+ 关闭图标
+
+
+
+
+
+
+
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+
+
+
+ 图标位置
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 圆角弹窗
+
+
+
+
+ 圆角弹窗
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/popup/test/demo.spec.ts b/packages/popup/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/popup/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();
+});