diff --git a/example/app.json b/example/app.json
index e36c95fa..be640f33 100644
--- a/example/app.json
+++ b/example/app.json
@@ -87,6 +87,7 @@
"van-empty": "./dist/empty/index",
"van-empty-demo": "./dist/empty/demo/index",
"van-field": "./dist/field/index",
+ "van-field-demo": "./dist/field/demo/index",
"van-goods-action": "./dist/goods-action/index",
"van-goods-action-demo": "./dist/goods-action/demo/index",
"van-goods-action-icon": "./dist/goods-action-icon/index",
diff --git a/example/pages/field/index.js b/example/pages/field/index.js
index d0f633c6..cc11dfda 100644
--- a/example/pages/field/index.js
+++ b/example/pages/field/index.js
@@ -1,21 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- sms: '',
- value: '',
- password: '',
- username: '',
- username2: '',
- username3: '',
- message: '',
- phone: '1365577'
- },
-
- onClickIcon() {
- wx.showToast({
- icon: 'none',
- title: '点击图标'
- });
- }
-});
+Page();
diff --git a/example/pages/field/index.wxml b/example/pages/field/index.wxml
index a026395d..26b32034 100644
--- a/example/pages/field/index.wxml
+++ b/example/pages/field/index.wxml
@@ -1,99 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- 发送验证码
-
-
-
+
diff --git a/packages/field/demo/index.json b/packages/field/demo/index.json
new file mode 100644
index 00000000..a98a2ee7
--- /dev/null
+++ b/packages/field/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-field": "../../field/index",
+ "van-cell-group": "../../cell-group/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/field/index.wxss b/packages/field/demo/index.less
similarity index 100%
rename from example/pages/field/index.wxss
rename to packages/field/demo/index.less
diff --git a/packages/field/demo/index.ts b/packages/field/demo/index.ts
new file mode 100644
index 00000000..70a9d8fa
--- /dev/null
+++ b/packages/field/demo/index.ts
@@ -0,0 +1,23 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ sms: '',
+ value: '',
+ password: '',
+ username: '',
+ username2: '',
+ username3: '',
+ message: '',
+ phone: '1365577',
+ },
+
+ methods: {
+ onClickIcon() {
+ wx.showToast({
+ icon: 'none',
+ title: '点击图标',
+ });
+ },
+ },
+});
diff --git a/packages/field/demo/index.wxml b/packages/field/demo/index.wxml
new file mode 100644
index 00000000..a026395d
--- /dev/null
+++ b/packages/field/demo/index.wxml
@@ -0,0 +1,99 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 发送验证码
+
+
+
diff --git a/packages/field/test/__snapshots__/demo.spec.ts.snap b/packages/field/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..93c91aaf
--- /dev/null
+++ b/packages/field/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,827 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 自定义类型
+
+
+
+
+
+
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 密码
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 禁用输入框
+
+
+
+
+
+
+
+
+
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 错误提示
+
+
+
+
+
+
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 手机号
+
+
+
+
+
+
+
+
+
+
+
+
+ 手机号格式错误
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 内容对齐方式
+
+
+
+
+
+
+
+
+
+ 用户名
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 高度自适应
+
+
+
+
+
+
+
+
+
+ 留言
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 插入按钮
+
+
+
+
+
+
+
+
+
+ 短信验证码
+
+
+
+
+
+
+
+
+
+
+ 发送验证码
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/field/test/demo.spec.ts b/packages/field/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/field/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();
+});