diff --git a/example/app.json b/example/app.json
index b5e1a7c1..5e1e2f3f 100644
--- a/example/app.json
+++ b/example/app.json
@@ -64,6 +64,7 @@
"usingComponents": {
"demo-block": "./components/demo-block/index",
"van-action-sheet": "./dist/action-sheet/index",
+ "van-action-sheet-demo": "./dist/action-sheet/demo/index",
"van-area": "./dist/area/index",
"van-button": "./dist/button/index",
"van-button-demo": "./dist/button/demo/index",
diff --git a/example/pages/action-sheet/index.js b/example/pages/action-sheet/index.js
index 7142137d..cc11dfda 100644
--- a/example/pages/action-sheet/index.js
+++ b/example/pages/action-sheet/index.js
@@ -1,58 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- show1: false,
- show2: false,
- show3: false,
- show4: false,
- show5: false,
- show6: false,
- action1: [
- { name: '选项' },
- { name: '选项' },
- { name: '选项', subname: '描述信息' },
- ],
- action2: [
- { name: '着色选项', color: '#ee0a24' },
- { loading: true },
- { name: '禁用选项', disabled: true },
- ],
- action6: [
- { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
- ],
- },
-
- toggle(type) {
- this.setData({
- [type]: !this.data[type],
- });
- },
-
- toggleActionSheet1() {
- this.toggle('show1');
- },
-
- toggleActionSheet2() {
- this.toggle('show2');
- },
-
- toggleActionSheet3() {
- this.toggle('show3');
- },
-
- toggleActionSheet4() {
- this.toggle('show4');
- },
-
- toggleActionSheet5() {
- this.toggle('show5');
- },
-
- toggleActionSheet6() {
- this.toggle('show6');
- },
- onGetUserInfo(e) {
- console.log(e.detail);
- },
-});
+Page();
diff --git a/example/pages/action-sheet/index.wxml b/example/pages/action-sheet/index.wxml
index 36c775e5..c574b5da 100644
--- a/example/pages/action-sheet/index.wxml
+++ b/example/pages/action-sheet/index.wxml
@@ -1,62 +1 @@
-
- 弹出菜单
-
-
-
-
- 弹出菜单
-
-
-
-
- 弹出菜单
-
-
-
-
-
- 弹出菜单
-
-
-
-
-
- 弹出菜单
-
- 内容
-
-
-
-
- 弹出菜单
-
-
-
+
diff --git a/packages/action-sheet/demo/index.json b/packages/action-sheet/demo/index.json
new file mode 100644
index 00000000..1409fecc
--- /dev/null
+++ b/packages/action-sheet/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-button": "../../button/index",
+ "van-action-sheet": "../../action-sheet/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/action-sheet/index.wxss b/packages/action-sheet/demo/index.less
similarity index 100%
rename from example/pages/action-sheet/index.wxss
rename to packages/action-sheet/demo/index.less
diff --git a/packages/action-sheet/demo/index.ts b/packages/action-sheet/demo/index.ts
new file mode 100644
index 00000000..9477f39f
--- /dev/null
+++ b/packages/action-sheet/demo/index.ts
@@ -0,0 +1,61 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ show1: false,
+ show2: false,
+ show3: false,
+ show4: false,
+ show5: false,
+ show6: false,
+ action1: [
+ { name: '选项' },
+ { name: '选项' },
+ { name: '选项', subname: '描述信息' },
+ ],
+ action2: [
+ { name: '着色选项', color: '#ee0a24' },
+ { loading: true },
+ { name: '禁用选项', disabled: true },
+ ],
+ action6: [
+ { name: '获取用户信息', color: '#07c160', openType: 'getUserInfo' },
+ ],
+ },
+
+ methods: {
+ toggle(type) {
+ this.setData({
+ [type]: !this.data[type],
+ });
+ },
+
+ toggleActionSheet1() {
+ this.toggle('show1');
+ },
+
+ toggleActionSheet2() {
+ this.toggle('show2');
+ },
+
+ toggleActionSheet3() {
+ this.toggle('show3');
+ },
+
+ toggleActionSheet4() {
+ this.toggle('show4');
+ },
+
+ toggleActionSheet5() {
+ this.toggle('show5');
+ },
+
+ toggleActionSheet6() {
+ this.toggle('show6');
+ },
+
+ onGetUserInfo(e) {
+ console.log(e.detail);
+ },
+ },
+});
diff --git a/packages/action-sheet/demo/index.wxml b/packages/action-sheet/demo/index.wxml
new file mode 100644
index 00000000..36c775e5
--- /dev/null
+++ b/packages/action-sheet/demo/index.wxml
@@ -0,0 +1,62 @@
+
+ 弹出菜单
+
+
+
+
+ 弹出菜单
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+ 弹出菜单
+
+ 内容
+
+
+
+
+ 弹出菜单
+
+
+
diff --git a/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap b/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..a66dc159
--- /dev/null
+++ b/packages/action-sheet/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,391 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 选项状态
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 展示取消按钮
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 展示描述信息
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 展示标题栏
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 微信开放能力
+
+
+
+
+ 弹出菜单
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/action-sheet/test/demo.spec.ts b/packages/action-sheet/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/action-sheet/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();
+});