diff --git a/example/app.json b/example/app.json
index 30a7e5ce..e6f45ee3 100644
--- a/example/app.json
+++ b/example/app.json
@@ -153,6 +153,7 @@
"van-collapse-demo": "./dist/collapse/demo/index",
"van-collapse-item": "./dist/collapse-item/index",
"van-picker": "./dist/picker/index",
+ "van-picker-demo": "./dist/picker/demo/index",
"van-overlay": "./dist/overlay/index",
"van-overlay-demo": "./dist/overlay/demo/index",
"van-circle": "./dist/circle/index",
diff --git a/example/pages/picker/index.js b/example/pages/picker/index.js
index db87a324..cc11dfda 100644
--- a/example/pages/picker/index.js
+++ b/example/pages/picker/index.js
@@ -1,48 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-Page({
- data: {
- column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
- column2: [
- { text: '杭州', disabled: true },
- { text: '宁波' },
- { text: '温州' }
- ],
- column3: {
- 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
- 福建: ['福州', '厦门', '莆田', '三明', '泉州']
- },
- column4: [
- {
- values: ['浙江', '福建'],
- className: 'column1'
- },
- {
- values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
- className: 'column2',
- defaultIndex: 2
- }
- ]
- },
-
- onChange1(event) {
- const { value, index } = event.detail;
- Toast(`Value: ${value}, Index：${index}`);
- },
-
- onConfirm(event) {
- const { value, index } = event.detail;
- Toast(`Value: ${value}, Index：${index}`);
- },
-
- onCancel() {
- Toast('取消');
- },
-
- onChange2(event) {
- const { picker, value } = event.detail;
- picker.setColumnValues(1, this.data.column3[value[0]]);
- getApp().picker = picker;
- }
-});
+Page();
diff --git a/example/pages/picker/index.wxml b/example/pages/picker/index.wxml
index 3c026b1f..08a7743b 100644
--- a/example/pages/picker/index.wxml
+++ b/example/pages/picker/index.wxml
@@ -1,45 +1 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/picker/index.wxss b/example/pages/picker/index.wxss
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/picker/demo/index.json b/packages/picker/demo/index.json
new file mode 100644
index 00000000..139758ba
--- /dev/null
+++ b/packages/picker/demo/index.json
@@ -0,0 +1,8 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-toast": "../../toast/index",
+ "van-picker": "../../picker/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/picker/demo/index.ts b/packages/picker/demo/index.ts
new file mode 100644
index 00000000..001607cf
--- /dev/null
+++ b/packages/picker/demo/index.ts
@@ -0,0 +1,59 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+VantComponent({
+ data: {
+ column1: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ column2: [
+ { text: '杭州', disabled: true },
+ { text: '宁波' },
+ { text: '温州' },
+ ],
+ column3: {
+ 浙江: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ 福建: ['福州', '厦门', '莆田', '三明', '泉州'],
+ },
+ column4: [
+ {
+ values: ['浙江', '福建'],
+ className: 'column1',
+ },
+ {
+ values: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
+ className: 'column2',
+ defaultIndex: 2,
+ },
+ ],
+ },
+
+ methods: {
+ onChange1(event) {
+ const { value, index } = event.detail;
+ Toast({
+ context: this,
+ message: `Value: ${value}, Index：${index}`,
+ });
+ },
+
+ onConfirm(event) {
+ const { value, index } = event.detail;
+ Toast({
+ context: this,
+ message: `Value: ${value}, Index：${index}`,
+ });
+ },
+
+ onCancel() {
+ Toast({
+ context: this,
+ message: '取消',
+ });
+ },
+
+ onChange2(event) {
+ const { picker, value } = event.detail;
+ picker.setColumnValues(1, this.data.column3[value[0]]);
+ getApp().picker = picker;
+ },
+ },
+});
diff --git a/packages/picker/demo/index.wxml b/packages/picker/demo/index.wxml
new file mode 100644
index 00000000..3c026b1f
--- /dev/null
+++ b/packages/picker/demo/index.wxml
@@ -0,0 +1,45 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/picker/test/__snapshots__/demo.spec.ts.snap b/packages/picker/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..ebc40e90
--- /dev/null
+++ b/packages/picker/test/__snapshots__/demo.spec.ts.snap
@@ -0,0 +1,682 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ 基础用法
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+ 嘉兴
+
+
+ 湖州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 默认选中项
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+ 嘉兴
+
+
+ 湖州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 展示顶部栏
+
+
+
+
+
+
+ 取消
+
+
+
+ 标题
+
+
+
+ 确认
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+ 嘉兴
+
+
+ 湖州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 多列联动
+
+
+
+
+
+
+
+
+ 浙江
+
+
+ 福建
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+ 嘉兴
+
+
+ 湖州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 禁用选项
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 加载状态
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 浙江
+
+
+ 福建
+
+
+
+
+
+
+
+
+ 杭州
+
+
+ 宁波
+
+
+ 温州
+
+
+ 嘉兴
+
+
+ 湖州
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/picker/test/demo.spec.ts b/packages/picker/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/picker/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();
+});