mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +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-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",
|
||||
|
||||
@ -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();
|
||||
|
||||
@ -1,38 +1 @@
|
||||
<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" />
|
||||
<van-steps-demo />
|
||||
|
||||
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