diff --git a/example/app.json b/example/app.json
index f7f0015a..b8d2f2fd 100644
--- a/example/app.json
+++ b/example/app.json
@@ -114,6 +114,7 @@
"van-stepper": "./dist/stepper/index",
"van-stepper-demo": "./dist/stepper/demo/index",
"van-steps": "./dist/steps/index",
+ "van-steps-demo": "./dist/steps/demo/index",
"van-sticky": "./dist/sticky/index",
"van-submit-bar": "./dist/submit-bar/index",
"van-swipe-cell": "./dist/swipe-cell/index",
diff --git a/example/pages/steps/index.js b/example/pages/steps/index.js
index 84985871..cc11dfda 100644
--- a/example/pages/steps/index.js
+++ b/example/pages/steps/index.js
@@ -1,44 +1,3 @@
import Page from '../../common/page';
-import Toast from '../../dist/toast/toast';
-import icons from '../../dist/@vant/icons/src/config';
-const steps = [
- {
- text: '步骤一',
- desc: '描述信息',
- },
- {
- text: '步骤二',
- desc: '描述信息',
- },
- {
- text: '步骤三',
- desc: '描述信息',
- },
- {
- text: '步骤四',
- desc: '描述信息',
- },
-];
-
-Page({
- data: {
- active: 1,
- steps,
- customIconSteps: steps.map((item, index) => ({
- ...item,
- inactiveIcon: icons.outline[index],
- activeIcon: icons.basic[index],
- })),
- },
-
- nextStep() {
- this.setData({
- active: ++this.data.active % 4,
- });
- },
-
- onClick(event) {
- Toast(`Index: ${event.detail}`);
- },
-});
+Page();
diff --git a/example/pages/steps/index.wxml b/example/pages/steps/index.wxml
index 5bb24f6b..ff137196 100644
--- a/example/pages/steps/index.wxml
+++ b/example/pages/steps/index.wxml
@@ -1,38 +1 @@
-
-
-
- 下一步
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
diff --git a/example/pages/steps/index.wxss b/example/pages/steps/index.wxss
deleted file mode 100644
index e69de29b..00000000
diff --git a/packages/steps/demo/index.json b/packages/steps/demo/index.json
new file mode 100644
index 00000000..6f5dc8ea
--- /dev/null
+++ b/packages/steps/demo/index.json
@@ -0,0 +1,9 @@
+{
+ "component": true,
+ "usingComponents": {
+ "van-steps": "../../steps/index",
+ "van-toast": "../../toast/index",
+ "van-button": "../../button/index",
+ "demo-block": "../../../example/components/demo-block/index"
+ }
+}
diff --git a/packages/steps/demo/index.less b/packages/steps/demo/index.less
new file mode 100644
index 00000000..b050b437
--- /dev/null
+++ b/packages/steps/demo/index.less
@@ -0,0 +1,8 @@
+.demo-margin-left {
+ margin-left: 10px;
+}
+
+.demo-margin-bottom {
+ display: block;
+ margin-bottom: 15px;
+}
diff --git a/packages/steps/demo/index.ts b/packages/steps/demo/index.ts
new file mode 100644
index 00000000..fa0b8931
--- /dev/null
+++ b/packages/steps/demo/index.ts
@@ -0,0 +1,301 @@
+import { VantComponent } from '../../common/component';
+import Toast from '../../toast/toast';
+
+const icons = {
+ name: 'vant-icon',
+ basic: [
+ 'arrow',
+ 'arrow-left',
+ 'arrow-up',
+ 'arrow-down',
+ 'success',
+ 'cross',
+ 'plus',
+ 'minus',
+ 'fail',
+ 'circle',
+ ],
+ outline: [
+ // has corresponding filled icon
+ 'location-o',
+ 'like-o',
+ 'star-o',
+ 'phone-o',
+ 'setting-o',
+ 'fire-o',
+ 'coupon-o',
+ 'cart-o',
+ 'shopping-cart-o',
+ 'cart-circle-o',
+ 'friends-o',
+ 'comment-o',
+ 'gem-o',
+ 'gift-o',
+ 'point-gift-o',
+ 'send-gift-o',
+ 'service-o',
+ 'bag-o',
+ 'todo-list-o',
+ 'balance-list-o',
+ 'close',
+ 'clock-o',
+ 'question-o',
+ 'passed',
+ 'add-o',
+ 'gold-coin-o',
+ 'info-o',
+ 'play-circle-o',
+ 'pause-circle-o',
+ 'stop-circle-o',
+ 'warning-o',
+ 'phone-circle-o',
+ 'music-o',
+ 'smile-o',
+ 'thumb-circle-o',
+ 'comment-circle-o',
+ 'browsing-history-o',
+ 'underway-o',
+ 'more-o',
+ 'video-o',
+ 'shop-o',
+ 'shop-collect-o',
+ 'share-o',
+ 'chat-o',
+ 'smile-comment-o',
+ 'vip-card-o',
+ 'award-o',
+ 'diamond-o',
+ 'volume-o',
+ 'cluster-o',
+ 'wap-home-o',
+ 'photo-o',
+ 'gift-card-o',
+ 'expand-o',
+ 'medal-o',
+ 'good-job-o',
+ 'manager-o',
+ 'label-o',
+ 'bookmark-o',
+ 'bill-o',
+ 'hot-o',
+ 'hot-sale-o',
+ 'new-o',
+ 'new-arrival-o',
+ 'goods-collect-o',
+ 'eye-o',
+ 'delete-o',
+ 'font-o',
+ // without corresponding filled icon
+ 'balance-o',
+ 'refund-o',
+ 'birthday-cake-o',
+ 'user-o',
+ 'orders-o',
+ 'tv-o',
+ 'envelop-o',
+ 'flag-o',
+ 'flower-o',
+ 'filter-o',
+ 'bar-chart-o',
+ 'chart-trending-o',
+ 'brush-o',
+ 'bullhorn-o',
+ 'hotel-o',
+ 'cashier-o',
+ 'newspaper-o',
+ 'warn-o',
+ 'notes-o',
+ 'calendar-o',
+ 'bulb-o',
+ 'user-circle-o',
+ 'desktop-o',
+ 'apps-o',
+ 'home-o',
+ 'back-top',
+ 'search',
+ 'points',
+ 'edit',
+ 'qr',
+ 'qr-invalid',
+ 'closed-eye',
+ 'down',
+ 'scan',
+ 'revoke',
+ 'free-postage',
+ 'certificate',
+ 'logistics',
+ 'contact',
+ 'cash-back-record',
+ 'after-sale',
+ 'exchange',
+ 'upgrade',
+ 'ellipsis',
+ 'description',
+ 'records',
+ 'sign',
+ 'completed',
+ 'failure',
+ 'ecard-pay',
+ 'peer-pay',
+ 'balance-pay',
+ 'credit-pay',
+ 'debit-pay',
+ 'cash-on-deliver',
+ 'other-pay',
+ 'tosend',
+ 'pending-payment',
+ 'paid',
+ 'aim',
+ 'discount',
+ 'idcard',
+ 'replay',
+ 'shrink',
+ 'shield-o',
+ 'guide-o',
+ ],
+ filled: [
+ // has corresponding outline icon
+ 'location',
+ 'like',
+ 'star',
+ 'phone',
+ 'setting',
+ 'fire',
+ 'coupon',
+ 'cart',
+ 'shopping-cart',
+ 'cart-circle',
+ 'friends',
+ 'comment',
+ 'gem',
+ 'gift',
+ 'point-gift',
+ 'send-gift',
+ 'service',
+ 'bag',
+ 'todo-list',
+ 'balance-list',
+ 'clear',
+ 'clock',
+ 'question',
+ 'checked',
+ 'add',
+ 'gold-coin',
+ 'info',
+ 'play-circle',
+ 'pause-circle',
+ 'stop-circle',
+ 'warning',
+ 'phone-circle',
+ 'music',
+ 'smile',
+ 'thumb-circle',
+ 'comment-circle',
+ 'browsing-history',
+ 'underway',
+ 'more',
+ 'video',
+ 'shop',
+ 'shop-collect',
+ 'share',
+ 'chat',
+ 'smile-comment',
+ 'vip-card',
+ 'award',
+ 'diamond',
+ 'volume',
+ 'cluster',
+ 'wap-home',
+ 'photo',
+ 'gift-card',
+ 'expand',
+ 'medal',
+ 'good-job',
+ 'manager',
+ 'label',
+ 'bookmark',
+ 'bill',
+ 'hot',
+ 'hot-sale',
+ 'new',
+ 'new-arrival',
+ 'goods-collect',
+ 'eye',
+ 'delete',
+ 'font',
+ // without corresponding outline icon
+ 'wechat',
+ 'wechat-pay',
+ 'alipay',
+ 'photograph',
+ 'youzan-shield',
+ 'umbrella-circle',
+ 'bell',
+ 'printer',
+ 'map-marked',
+ 'card',
+ 'add-square',
+ 'live',
+ 'lock',
+ 'audio',
+ 'graphic',
+ 'column',
+ 'invitation',
+ 'play',
+ 'pause',
+ 'stop',
+ 'weapp-nav',
+ 'ascending',
+ 'descending',
+ 'bars',
+ 'wap-nav',
+ 'enlarge',
+ 'photo-fail',
+ 'sort',
+ ],
+};
+const steps = [
+ {
+ text: '步骤一',
+ desc: '描述信息',
+ },
+ {
+ text: '步骤二',
+ desc: '描述信息',
+ },
+ {
+ text: '步骤三',
+ desc: '描述信息',
+ },
+ {
+ text: '步骤四',
+ desc: '描述信息',
+ },
+];
+
+VantComponent({
+ data: {
+ active: 1,
+ steps,
+ customIconSteps: steps.map((item, index) => ({
+ ...item,
+ inactiveIcon: icons.outline[index],
+ activeIcon: icons.basic[index],
+ })),
+ },
+
+ methods: {
+ nextStep() {
+ this.setData({
+ active: ++this.data.active % 4,
+ });
+ },
+
+ onClick(event) {
+ Toast({
+ context: this,
+ message: `Index: ${event.detail}`,
+ });
+ },
+ },
+});
diff --git a/packages/steps/demo/index.wxml b/packages/steps/demo/index.wxml
new file mode 100644
index 00000000..5bb24f6b
--- /dev/null
+++ b/packages/steps/demo/index.wxml
@@ -0,0 +1,38 @@
+
+
+
+ 下一步
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/steps/test/__snapshots__/demo.spec.ts.snap b/packages/steps/test/__snapshots__/demo.spec.ts.snap
new file mode 100644
index 00000000..9d69fcb1
--- /dev/null
+++ b/packages/steps/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/steps/test/demo.spec.ts b/packages/steps/test/demo.spec.ts
new file mode 100644
index 00000000..4c3798cb
--- /dev/null
+++ b/packages/steps/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();
+});