diff --git a/example/app.json b/example/app.json
index b254713b..e929f993 100644
--- a/example/app.json
+++ b/example/app.json
@@ -103,6 +103,7 @@
"van-popup": "./dist/popup/index",
"van-progress": "./dist/progress/index",
"van-radio": "./dist/radio/index",
+ "van-radio-demo": "./dist/radio/demo/index",
"van-radio-group": "./dist/radio-group/index",
"van-row": "./dist/row/index",
"van-search": "./dist/search/index",
diff --git a/example/pages/radio/index.js b/example/pages/radio/index.js
index 8470cc50..cc11dfda 100644
--- a/example/pages/radio/index.js
+++ b/example/pages/radio/index.js
@@ -1,32 +1,3 @@
import Page from '../../common/page';
-Page({
- data: {
- radio1: '1',
- radio2: '2',
- radio3: '1',
- radio4: '1',
- radio5: '1',
- radioSize: '1',
- radioLabel: '1',
- radioShape: '1',
- icon: {
- normal:
- 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
- active:
- 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png'
- }
- },
-
- onChange(event) {
- const { key } = event.currentTarget.dataset;
- this.setData({ [key]: event.detail });
- },
-
- onClick(event) {
- const { name } = event.currentTarget.dataset;
- this.setData({
- radio5: name
- });
- }
-});
+Page();
diff --git a/example/pages/radio/index.wxml b/example/pages/radio/index.wxml
index 225e5087..ecc4a0bd 100644
--- a/example/pages/radio/index.wxml
+++ b/example/pages/radio/index.wxml
@@ -1,126 +1 @@
-
-
- 单选框 1
- 单选框 2
-
-
-
-
-
- 单选框 1
- 单选框 2
-
-
-
-
-
- 单选框 1
- 单选框 2
-
-
-
-
-
- 单选框
- 单选框
-
-
-
-
-
- 单选框
- 单选框
-
-
-
-
-
- 单选框
- 单选框
-
-
-
-
-
-
- 自定义图标
-
-
-
- 自定义图标
-
-
-
-
-
-
-
- 单选框 1
- 单选框 2
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/packages/radio/demo/index.json b/packages/radio/demo/index.json
new file mode 100644
index 00000000..42c88424
--- /dev/null
+++ b/packages/radio/demo/index.json
@@ -0,0 +1,10 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-radio": "../../radio/index",
+ "van-radio-group": "../../radio-group/index",
+ "van-cell": "../../cell/index",
+ "van-cell-group": "../../cell-group/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/example/pages/radio/index.wxss b/packages/radio/demo/index.less
similarity index 100%
rename from example/pages/radio/index.wxss
rename to packages/radio/demo/index.less
diff --git a/packages/radio/demo/index.ts b/packages/radio/demo/index.ts
new file mode 100644
index 00000000..12c79f5e
--- /dev/null
+++ b/packages/radio/demo/index.ts
@@ -0,0 +1,34 @@
+import { VantComponent } from '../../common/component';
+
+VantComponent({
+ data: {
+ radio1: '1',
+ radio2: '2',
+ radio3: '1',
+ radio4: '1',
+ radio5: '1',
+ radioSize: '1',
+ radioLabel: '1',
+ radioShape: '1',
+ icon: {
+ normal:
+ 'https://img.yzcdn.cn/public_files/2017/10/13/c547715be149dd3faa817e4a948b40c4.png',
+ active:
+ 'https://img.yzcdn.cn/public_files/2017/10/13/793c77793db8641c4c325b7f25bf130d.png',
+ },
+ },
+
+ methods: {
+ onChange(event) {
+ const { key } = event.currentTarget.dataset;
+ this.setData({ [key]: event.detail });
+ },
+
+ onClick(event) {
+ const { name } = event.currentTarget.dataset;
+ this.setData({
+ radio5: name,
+ });
+ },
+ },
+});
diff --git a/packages/radio/demo/index.wxml b/packages/radio/demo/index.wxml
new file mode 100644
index 00000000..b3d4bc19
--- /dev/null
+++ b/packages/radio/demo/index.wxml
@@ -0,0 +1,126 @@
+
+
+ 单选框 1
+ 单选框 2
+
+
+
+
+
+ 单选框 1
+ 单选框 2
+
+
+
+
+
+ 单选框 1
+ 单选框 2
+
+
+
+
+
+ 单选框
+ 单选框
+
+
+
+
+
+ 单选框
+ 单选框
+
+
+
+
+
+ 单选框
+ 单选框
+
+
+
+
+
+
+ 自定义图标
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+ 单选框 1
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/radio/test/__snapshots__/demo.spec.ts.snap b/packages/radio/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..6bb23230
--- /dev/null
+++ b/packages/radio/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,761 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基本用法
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 1
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+ 水平排列
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 1
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+ 禁用状态
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 1
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+ 自定义形状
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+ 自定义颜色
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+ 自定义大小
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+
+ 单选框
+
+
+
+
+
+
+
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+
+
+
+
+ 自定义图标
+
+
+
+
+
+
+
+
+
+
+
+ 禁用文本点击
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 1
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+ 与 Cell 组件一起使用
+
+
+
+
+
+
+
+
+ 单选框 1
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 单选框 2
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/radio/test/demo.spec.ts b/packages/radio/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/radio/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();
+});