mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-24 02:16:16 +08:00
test(Steps): add demo test
This commit is contained in:
nemo-shen
neverland
parent
6e4ebfd886
commit
1eabea17a8
@ -114,6 +114,7 @@
|
|||||||
"van-stepper": "./dist/stepper/index",
|
"van-stepper": "./dist/stepper/index",
|
||||||
"van-stepper-demo": "./dist/stepper/demo/index",
|
"van-stepper-demo": "./dist/stepper/demo/index",
|
||||||
"van-steps": "./dist/steps/index",
|
"van-steps": "./dist/steps/index",
|
||||||
|
"van-steps-demo": "./dist/steps/demo/index",
|
||||||
"van-sticky": "./dist/sticky/index",
|
"van-sticky": "./dist/sticky/index",
|
||||||
"van-submit-bar": "./dist/submit-bar/index",
|
"van-submit-bar": "./dist/submit-bar/index",
|
||||||
"van-swipe-cell": "./dist/swipe-cell/index",
|
"van-swipe-cell": "./dist/swipe-cell/index",
|
||||||
|
|||||||
@ -1,44 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
import Toast from '../../dist/toast/toast';
|
|
||||||
import icons from '../../dist/@vant/icons/src/config';
|
|
||||||
|
|
||||||
const steps = [
|
Page();
|
||||||
{
|
|
||||||
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}`);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,38 +1 @@
|
|||||||
<demo-block title="基础用法">
|
<van-steps-demo />
|
||||||
<van-steps
|
|
||||||
steps="{{ steps }}"
|
|
||||||
active="{{ active }}"
|
|
||||||
bind:click-step="onClick"
|
|
||||||
custom-class="demo-margin-bottom"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义样式">
|
|
||||||
<van-steps
|
|
||||||
steps="{{ steps }}"
|
|
||||||
active="{{ active }}"
|
|
||||||
active-icon="success"
|
|
||||||
active-color="#38f"
|
|
||||||
inactive-icon="arrow"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="自定义图标">
|
|
||||||
<van-steps
|
|
||||||
steps="{{ customIconSteps }}"
|
|
||||||
active="{{ active }}"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="竖向步骤条">
|
|
||||||
<van-steps
|
|
||||||
steps="{{ steps }}"
|
|
||||||
active="{{ active }}"
|
|
||||||
direction="vertical"
|
|
||||||
active-color="#ee0a24"
|
|
||||||
/>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<van-toast id="van-toast" />
|
|
||||||
|
|||||||
9
packages/steps/demo/index.json
Normal file
9
packages/steps/demo/index.json
Normal file
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
8
packages/steps/demo/index.less
Normal file
8
packages/steps/demo/index.less
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.demo-margin-left {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.demo-margin-bottom {
|
||||||
|
display: block;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
301
packages/steps/demo/index.ts
Normal file
301
packages/steps/demo/index.ts
Normal file
@ -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}`,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
38
packages/steps/demo/index.wxml
Normal file
38
packages/steps/demo/index.wxml
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-steps
|
||||||
|
steps="{{ steps }}"
|
||||||
|
active="{{ active }}"
|
||||||
|
bind:click-step="onClick"
|
||||||
|
custom-class="demo-margin-bottom"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<van-button custom-class="demo-margin-left" bind:click="nextStep">下一步</van-button>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义样式">
|
||||||
|
<van-steps
|
||||||
|
steps="{{ steps }}"
|
||||||
|
active="{{ active }}"
|
||||||
|
active-icon="success"
|
||||||
|
active-color="#38f"
|
||||||
|
inactive-icon="arrow"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="自定义图标">
|
||||||
|
<van-steps
|
||||||
|
steps="{{ customIconSteps }}"
|
||||||
|
active="{{ active }}"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="竖向步骤条">
|
||||||
|
<van-steps
|
||||||
|
steps="{{ steps }}"
|
||||||
|
active="{{ active }}"
|
||||||
|
direction="vertical"
|
||||||
|
active-color="#ee0a24"
|
||||||
|
/>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<van-toast id="van-toast" />
|
||||||
682
packages/steps/test/__snapshots__/demo.spec.ts.snap
Normal file
682
packages/steps/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,682 @@
|
|||||||
|
// 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-steps
|
||||||
|
customClass="demo-margin-bottom"
|
||||||
|
bind:click-step="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-steps van-steps--horizontal"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__wrapper"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--finish van-hairline"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤一
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #07c160"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #07c160"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--process van-hairline"
|
||||||
|
data-index="{{1}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style="color: #07c160"
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤二
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-checked"
|
||||||
|
style="color:#07c160"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤三
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤四
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-steps>
|
||||||
|
<van-button
|
||||||
|
customClass="demo-margin-left"
|
||||||
|
bind:click="nextStep"
|
||||||
|
>
|
||||||
|
<wx-button
|
||||||
|
appParameter=""
|
||||||
|
ariaLabel=""
|
||||||
|
businessId="{{0}}"
|
||||||
|
class="custom-class van-button van-button--default van-button--normal "
|
||||||
|
data-detail="{{null}}"
|
||||||
|
formType=""
|
||||||
|
hoverClass="van-button--active hover-class"
|
||||||
|
id=""
|
||||||
|
lang=""
|
||||||
|
openType=""
|
||||||
|
sendMessageImg=""
|
||||||
|
sendMessagePath=""
|
||||||
|
sendMessageTitle=""
|
||||||
|
sessionFrom=""
|
||||||
|
showMessageCard="{{false}}"
|
||||||
|
style=""
|
||||||
|
bind:contact="onContact"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:getphonenumber="onGetPhoneNumber"
|
||||||
|
bind:getuserinfo="onGetUserInfo"
|
||||||
|
bind:launchapp="onLaunchApp"
|
||||||
|
bind:opensetting="onOpenSetting"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-button__text"
|
||||||
|
>
|
||||||
|
下一步
|
||||||
|
</wx-view>
|
||||||
|
</wx-button>
|
||||||
|
</van-button>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义样式
|
||||||
|
</wx-view>
|
||||||
|
<van-steps>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-steps van-steps--horizontal"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__wrapper"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--finish van-hairline"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤一
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style="color:#38f"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #38f"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--process van-hairline"
|
||||||
|
data-index="{{1}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style="color: #38f"
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤二
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-success"
|
||||||
|
style="color:#38f"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤三
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style="color:#969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤四
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow"
|
||||||
|
style="color:#969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-steps>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
自定义图标
|
||||||
|
</wx-view>
|
||||||
|
<van-steps>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-steps van-steps--horizontal"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__wrapper"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--finish van-hairline"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤一
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-location-o"
|
||||||
|
style="color:#07c160"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #07c160"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--process van-hairline"
|
||||||
|
data-index="{{1}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style="color: #07c160"
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤二
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-arrow-left"
|
||||||
|
style="color:#07c160"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤三
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-star-o"
|
||||||
|
style="color:#969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--horizontal van-step--inactive van-hairline"
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤四
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-phone-o"
|
||||||
|
style="color:#969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-steps>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
竖向步骤条
|
||||||
|
</wx-view>
|
||||||
|
<van-steps>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-steps van-steps--vertical"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__wrapper"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--vertical van-step--finish van-hairline"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤一
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #ee0a24"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #ee0a24"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--vertical van-step--process van-hairline"
|
||||||
|
data-index="{{1}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style="color: #ee0a24"
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤二
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-step__icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-checked"
|
||||||
|
style="color:#ee0a24"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--vertical van-step--inactive van-hairline"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤三
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__line"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step van-step--vertical van-step--inactive van-hairline"
|
||||||
|
data-index="{{3}}"
|
||||||
|
style="color: #969799"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__title"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view>
|
||||||
|
步骤四
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="desc-class"
|
||||||
|
>
|
||||||
|
描述信息
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle-container"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-step__circle"
|
||||||
|
style="background-color: #969799"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-steps>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<van-toast
|
||||||
|
id="van-toast"
|
||||||
|
>
|
||||||
|
<van-transition
|
||||||
|
customClass="van-toast__container"
|
||||||
|
/>
|
||||||
|
</van-toast>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/steps/test/demo.spec.ts
Normal file
11
packages/steps/test/demo.spec.ts
Normal file
@ -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();
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user