diff --git a/example/app.json b/example/app.json
index b3ccf8e1..ca9c7c9e 100644
--- a/example/app.json
+++ b/example/app.json
@@ -131,6 +131,7 @@
"van-submit-bar": "./dist/submit-bar/index",
"van-submit-bar-demo": "./dist/submit-bar/demo/index",
"van-swipe-cell": "./dist/swipe-cell/index",
+ "van-swipe-cell-demo": "./dist/swipe-cell/demo/index",
"van-uploader": "./dist/uploader/index",
"van-switch": "./dist/switch/index",
"van-switch-demo": "./dist/switch/demo/index",
diff --git a/example/pages/swipe-cell/index.js b/example/pages/swipe-cell/index.js
index 2bce6e75..cc11dfda 100644
--- a/example/pages/swipe-cell/index.js
+++ b/example/pages/swipe-cell/index.js
@@ -1,39 +1,3 @@
import Page from '../../common/page';
-import Dialog from '../../dist/dialog/dialog';
-import Notify from '../../dist/notify/notify';
-Page({
- onClose(event) {
- const { position, instance } = event.detail;
- switch (position) {
- case 'left':
- case 'cell':
- instance.close();
- break;
- case 'right':
- Dialog.confirm({
- message: '确定删除吗？'
- }).then(() => {
- instance.close();
- });
- break;
- }
- },
- onOpen(event) {
- const { position, name } = event.detail;
- switch (position) {
- case 'left':
- Notify({
- type: 'primary',
- message: `${name}${position}部分展示open事件被触发`
- });
- break;
- case 'right':
- Notify({
- type: 'primary',
- message: `${name}${position}部分展示open事件被触发`
- });
- break;
- }
- }
-});
+Page();
diff --git a/example/pages/swipe-cell/index.wxml b/example/pages/swipe-cell/index.wxml
index eab0b46a..317c98be 100644
--- a/example/pages/swipe-cell/index.wxml
+++ b/example/pages/swipe-cell/index.wxml
@@ -1,32 +1 @@
-<demo-block title="基础用法">
- <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
- <view slot="left" class="van-swipe-cell__left">选择</view>
- <van-cell-group>
- <van-cell title="单元格" value="内容" />
- </van-cell-group>
- <view slot="right" class="van-swipe-cell__right">删除</view>
- </van-swipe-cell>
-</demo-block>
-
-<demo-block title="异步关闭">
- <van-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
- <view slot="left" class="van-swipe-cell__left">选择</view>
- <van-cell-group>
- <van-cell title="单元格" value="内容" />
- </van-cell-group>
- <view slot="right" class="van-swipe-cell__right">删除</view>
- </van-swipe-cell>
-</demo-block>
-
-<demo-block title="主动打开">
- <van-swipe-cell id="swipe-cell2" right-width="{{ 65 }}" left-width="{{ 65 }}" name="示例" bind:open="onOpen" >
- <view slot="left" class="van-swipe-cell__left">选择</view>
- <van-cell-group>
- <van-cell title="单元格" value="内容" />
- </van-cell-group>
- <view slot="right" class="van-swipe-cell__right">删除</view>
- </van-swipe-cell>
-</demo-block>
-
-<van-dialog id="van-dialog" />
-<van-notify id="van-notify" />
+<van-swipe-cell-demo />
diff --git a/packages/swipe-cell/demo/index.json b/packages/swipe-cell/demo/index.json
new file mode 100644
index 00000000..d9be6118
--- /dev/null
+++ b/packages/swipe-cell/demo/index.json
@@ -0,0 +1,11 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-cell": "../../cell/index",
+ "van-dialog": "../../dialog/index",
+ "van-notify": "../../notify/index",
+ "van-swipe-cell": "../../swipe-cell/index",
+ "van-cell-group": "../../cell-group/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/swipe-cell/index.wxss b/packages/swipe-cell/demo/index.less
similarity index 100%
rename from example/pages/swipe-cell/index.wxss
rename to packages/swipe-cell/demo/index.less
diff --git a/packages/swipe-cell/demo/index.ts b/packages/swipe-cell/demo/index.ts
new file mode 100644
index 00000000..b5485f9e
--- /dev/null
+++ b/packages/swipe-cell/demo/index.ts
@@ -0,0 +1,45 @@
+import { VantComponent } from '../../common/component';
+import Dialog from '../../dialog/dialog';
+import Notify from '../../notify/notify';
+
+VantComponent({
+ methods: {
+ onClose(event) {
+ const { position, instance } = event.detail;
+ switch (position) {
+ case 'left':
+ case 'cell':
+ instance.close();
+ break;
+ case 'right':
+ Dialog.confirm({
+ context: this,
+ message: '确定删除吗？',
+ }).then(() => {
+ instance.close();
+ });
+ break;
+ }
+ },
+
+ onOpen(event) {
+ const { position, name } = event.detail;
+ switch (position) {
+ case 'left':
+ Notify({
+ context: this,
+ type: 'primary',
+ message: `${name}${position}部分展示open事件被触发`,
+ });
+ break;
+ case 'right':
+ Notify({
+ context: this,
+ type: 'primary',
+ message: `${name}${position}部分展示open事件被触发`,
+ });
+ break;
+ }
+ },
+ },
+});
diff --git a/packages/swipe-cell/demo/index.wxml b/packages/swipe-cell/demo/index.wxml
new file mode 100644
index 00000000..eab0b46a
--- /dev/null
+++ b/packages/swipe-cell/demo/index.wxml
@@ -0,0 +1,32 @@
+<demo-block title="基础用法">
+ <van-swipe-cell right-width="{{ 65 }}" left-width="{{ 65 }}">
+ <view slot="left" class="van-swipe-cell__left">选择</view>
+ <van-cell-group>
+ <van-cell title="单元格" value="内容" />
+ </van-cell-group>
+ <view slot="right" class="van-swipe-cell__right">删除</view>
+ </van-swipe-cell>
+</demo-block>
+
+<demo-block title="异步关闭">
+ <van-swipe-cell id="swipe-cell" right-width="{{ 65 }}" left-width="{{ 65 }}" async-close bind:close="onClose">
+ <view slot="left" class="van-swipe-cell__left">选择</view>
+ <van-cell-group>
+ <van-cell title="单元格" value="内容" />
+ </van-cell-group>
+ <view slot="right" class="van-swipe-cell__right">删除</view>
+ </van-swipe-cell>
+</demo-block>
+
+<demo-block title="主动打开">
+ <van-swipe-cell id="swipe-cell2" right-width="{{ 65 }}" left-width="{{ 65 }}" name="示例" bind:open="onOpen" >
+ <view slot="left" class="van-swipe-cell__left">选择</view>
+ <van-cell-group>
+ <van-cell title="单元格" value="内容" />
+ </van-cell-group>
+ <view slot="right" class="van-swipe-cell__right">删除</view>
+ </van-swipe-cell>
+</demo-block>
+
+<van-dialog id="van-dialog" />
+<van-notify id="van-notify" />
diff --git a/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap b/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..56854a7f
--- /dev/null
+++ b/packages/swipe-cell/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,270 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+<main>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 基础用法
+ </wx-view>
+ <van-swipe-cell>
+ <wx-view
+ class="van-swipe-cell custom-class"
+ data-key="cell"
+ catch:tap="onClick"
+ bind:touchcancel="endDrag"
+ bind:touchend="endDrag"
+ catch:touchmove=""
+ bind:touchstart="startDrag"
+ >
+ <wx-view
+ style=""
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ data-key="left"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ slot="left"
+ >
+ 选择
+ </wx-view>
+ </wx-view>
+ <van-cell-group>
+ <wx-view
+ class="custom-class van-cell-group van-hairline--top-bottom"
+ >
+ <van-cell>
+ <wx-view
+ class="custom-class van-cell"
+ hoverClass="van-cell--hover hover-class"
+ hoverStayTime="70"
+ style=""
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-cell__title title-class"
+ style=""
+ >
+ 单元格
+ </wx-view>
+ <wx-view
+ class="van-cell__value value-class"
+ >
+ 内容
+ </wx-view>
+ </wx-view>
+ </van-cell>
+ </wx-view>
+ </van-cell-group>
+ <wx-view
+ class="van-swipe-cell__right"
+ data-key="right"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__right"
+ slot="right"
+ >
+ 删除
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-swipe-cell>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 异步关闭
+ </wx-view>
+ <van-swipe-cell
+ id="swipe-cell"
+ bind:close="onClose"
+ >
+ <wx-view
+ class="van-swipe-cell custom-class"
+ data-key="cell"
+ catch:tap="onClick"
+ bind:touchcancel="endDrag"
+ bind:touchend="endDrag"
+ catch:touchmove=""
+ bind:touchstart="startDrag"
+ >
+ <wx-view
+ style=""
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ data-key="left"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ slot="left"
+ >
+ 选择
+ </wx-view>
+ </wx-view>
+ <van-cell-group>
+ <wx-view
+ class="custom-class van-cell-group van-hairline--top-bottom"
+ >
+ <van-cell>
+ <wx-view
+ class="custom-class van-cell"
+ hoverClass="van-cell--hover hover-class"
+ hoverStayTime="70"
+ style=""
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-cell__title title-class"
+ style=""
+ >
+ 单元格
+ </wx-view>
+ <wx-view
+ class="van-cell__value value-class"
+ >
+ 内容
+ </wx-view>
+ </wx-view>
+ </van-cell>
+ </wx-view>
+ </van-cell-group>
+ <wx-view
+ class="van-swipe-cell__right"
+ data-key="right"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__right"
+ slot="right"
+ >
+ 删除
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-swipe-cell>
+ </wx-view>
+ </demo-block>
+ <demo-block>
+ <wx-view
+ class="custom-class demo-block van-clearfix "
+ >
+ <wx-view
+ class="demo-block__title"
+ >
+ 主动打开
+ </wx-view>
+ <van-swipe-cell
+ id="swipe-cell2"
+ bind:open="onOpen"
+ >
+ <wx-view
+ class="van-swipe-cell custom-class"
+ data-key="cell"
+ catch:tap="onClick"
+ bind:touchcancel="endDrag"
+ bind:touchend="endDrag"
+ catch:touchmove=""
+ bind:touchstart="startDrag"
+ >
+ <wx-view
+ style=""
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ data-key="left"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__left"
+ slot="left"
+ >
+ 选择
+ </wx-view>
+ </wx-view>
+ <van-cell-group>
+ <wx-view
+ class="custom-class van-cell-group van-hairline--top-bottom"
+ >
+ <van-cell>
+ <wx-view
+ class="custom-class van-cell"
+ hoverClass="van-cell--hover hover-class"
+ hoverStayTime="70"
+ style=""
+ bind:tap="onClick"
+ >
+ <wx-view
+ class="van-cell__title title-class"
+ style=""
+ >
+ 单元格
+ </wx-view>
+ <wx-view
+ class="van-cell__value value-class"
+ >
+ 内容
+ </wx-view>
+ </wx-view>
+ </van-cell>
+ </wx-view>
+ </van-cell-group>
+ <wx-view
+ class="van-swipe-cell__right"
+ data-key="right"
+ catch:tap="onClick"
+ >
+ <wx-view
+ class="van-swipe-cell__right"
+ slot="right"
+ >
+ 删除
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </wx-view>
+ </van-swipe-cell>
+ </wx-view>
+ </demo-block>
+ <van-dialog>
+ <van-popup
+ customClass="van-dialog van-dialog--default "
+ bind:close="onClickOverlay"
+ >
+ <van-overlay
+ bind:click="onClickOverlay"
+ >
+ <van-transition
+ customClass="van-overlay"
+ bind:tap="onClick"
+ catch:touchmove="noop"
+ />
+ </van-overlay>
+ </van-popup>
+ </van-dialog>
+ <van-notify
+ id="van-notify"
+ >
+ <van-transition
+ customClass="van-notify__container"
+ bind:tap="onTap"
+ />
+ </van-notify>
+</main>
+`;
diff --git a/packages/swipe-cell/test/demo.spec.ts b/packages/swipe-cell/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/swipe-cell/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();
+});