diff --git a/example/app.json b/example/app.json
index 5e1e2f3f..8c9d7fb2 100644
--- a/example/app.json
+++ b/example/app.json
@@ -66,6 +66,7 @@
"van-action-sheet": "./dist/action-sheet/index",
"van-action-sheet-demo": "./dist/action-sheet/demo/index",
"van-area": "./dist/area/index",
+ "van-area-demo": "./dist/area/demo/index",
"van-button": "./dist/button/index",
"van-button-demo": "./dist/button/demo/index",
"van-card": "./dist/card/index",
diff --git a/example/pages/area/index.js b/example/pages/area/index.js
index 7023ccaf..cc11dfda 100644
--- a/example/pages/area/index.js
+++ b/example/pages/area/index.js
@@ -1,43 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-const db = wx.cloud.database();
-
-Page({
- data: {
- areaList: {},
- loading: true,
- value: 330302
- },
-
- onShow() {
- db.collection('region').limit(1).get().then(res => {
- if (res.data && res.data.length > 0) {
- this.setData({
- loading: false,
- areaList: res.data[0]
- });
- }
- })
- .catch(err => {
- console.log(err);
- this.setData({
- loading: false,
- });
- });
- },
-
- onChange(event) {
- const { values } = event.detail;
-
- Toast(values.map(item => item.name).join('-'));
- },
-
- onConfirm(event) {
- console.log(event);
- },
-
- onCancel(event) {
- console.log(event);
- }
-});
+Page();
diff --git a/example/pages/area/index.wxml b/example/pages/area/index.wxml
index 79e453f2..762dc53e 100644
--- a/example/pages/area/index.wxml
+++ b/example/pages/area/index.wxml
@@ -1,46 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/area/index.wxss b/example/pages/area/index.wxss
deleted file mode 100644
index 8b137891..00000000
--- a/example/pages/area/index.wxss
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/packages/area/demo/index.json b/packages/area/demo/index.json
new file mode 100644
index 00000000..f9c45f20
--- /dev/null
+++ b/packages/area/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-area": "../../area/index",
+ "van-toast": "../../toast/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/area/demo/index.ts b/packages/area/demo/index.ts
new file mode 100644
index 00000000..b1262ae0
--- /dev/null
+++ b/packages/area/demo/index.ts
@@ -0,0 +1,51 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+const db = wx.cloud?.database();
+
+VantComponent({
+ data: {
+ areaList: {},
+ loading: true,
+ value: 330302,
+ },
+
+ mounted() {
+ db?.collection('region')
+ .limit(1)
+ .get()
+ .then((res) => {
+ if (res.data && res.data.length > 0) {
+ this.setData({
+ loading: false,
+ areaList: res.data[0],
+ });
+ }
+ })
+ .catch((err) => {
+ console.log(err);
+ this.setData({
+ loading: false,
+ });
+ });
+ },
+
+ methods: {
+ onChange(event) {
+ const { values } = event.detail;
+
+ Toast({
+ context: this,
+ message: values.map((item) => item.name).join('-'),
+ });
+ },
+
+ onConfirm(event) {
+ console.log(event);
+ },
+
+ onCancel(event) {
+ console.log(event);
+ },
+ },
+});
diff --git a/packages/area/demo/index.wxml b/packages/area/demo/index.wxml
new file mode 100644
index 00000000..ac048b64
--- /dev/null
+++ b/packages/area/demo/index.wxml
@@ -0,0 +1,11 @@
+
+
+
+
diff --git a/packages/area/test/__snapshots__/demo.spec.ts.snap b/packages/area/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..3ee0f137
--- /dev/null
+++ b/packages/area/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,162 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+ 取消
+
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/area/test/demo.spec.ts b/packages/area/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/area/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();
+});