mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
test(Icon): add demo test
This commit is contained in:
nemo-shen
neverland
parent
dfe3d3e9f5
commit
13df6519a4
@ -91,6 +91,7 @@
|
|||||||
"van-goods-action-icon": "./dist/goods-action-icon/index",
|
"van-goods-action-icon": "./dist/goods-action-icon/index",
|
||||||
"van-goods-action-button": "./dist/goods-action-button/index",
|
"van-goods-action-button": "./dist/goods-action-button/index",
|
||||||
"van-icon": "./dist/icon/index",
|
"van-icon": "./dist/icon/index",
|
||||||
|
"van-icon-demo": "./dist/icon/demo/index",
|
||||||
"van-image": "./dist/image/index",
|
"van-image": "./dist/image/index",
|
||||||
"van-loading": "./dist/loading/index",
|
"van-loading": "./dist/loading/index",
|
||||||
"van-nav-bar": "./dist/nav-bar/index",
|
"van-nav-bar": "./dist/nav-bar/index",
|
||||||
|
|||||||
@ -1,17 +1,3 @@
|
|||||||
import icons from '../../dist/@vant/icons/src/config';
|
|
||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
icons,
|
|
||||||
active: 0,
|
|
||||||
demoIcon: 'chat-o',
|
|
||||||
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
|
|
||||||
},
|
|
||||||
|
|
||||||
onSwitch(event) {
|
|
||||||
this.setData({
|
|
||||||
active: event.detail.index
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|||||||
@ -1,156 +1 @@
|
|||||||
<van-tabs
|
<van-icon-demo />
|
||||||
active="{{ active }}"
|
|
||||||
color="#1989fa"
|
|
||||||
bind:change="onSwitch"
|
|
||||||
>
|
|
||||||
<van-tab title="用法示例" custom-class="demo-tab-pane">
|
|
||||||
<demo-block title="基础用法">
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoImage }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
<demo-block title="提示信息">
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
dot
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
info="9"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
info="99+"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
<demo-block title="图标颜色">
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
color="#1989fa"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
color="#07c160"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
<demo-block title="图标大小">
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="40"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
<van-col
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ demoIcon }}"
|
|
||||||
size="3rem"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
</van-col>
|
|
||||||
</demo-block>
|
|
||||||
</van-tab>
|
|
||||||
<van-tab title="基础图标" custom-class="demo-tab-pane">
|
|
||||||
<van-col
|
|
||||||
wx:for="{{ icons.basic }}"
|
|
||||||
wx:key="index"
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ item }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
<view class="text">{{ item }}</view>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
<van-tab title="线框风格" custom-class="demo-tab-pane">
|
|
||||||
<van-col
|
|
||||||
wx:for="{{ icons.outline }}"
|
|
||||||
wx:key="index"
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ item }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
<view class="text">{{ item }}</view>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
<van-tab title="实底风格" custom-class="demo-tab-pane">
|
|
||||||
<van-col
|
|
||||||
wx:for="{{ icons.filled }}"
|
|
||||||
wx:key="index"
|
|
||||||
custom-class="col"
|
|
||||||
span="6"
|
|
||||||
>
|
|
||||||
<van-icon
|
|
||||||
name="{{ item }}"
|
|
||||||
size="32px"
|
|
||||||
custom-class="icon"
|
|
||||||
/>
|
|
||||||
<view class="text">{{ item }}</view>
|
|
||||||
</van-col>
|
|
||||||
</van-tab>
|
|
||||||
</van-tabs>
|
|
||||||
|
|||||||
10
packages/icon/demo/index.json
Normal file
10
packages/icon/demo/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-col": "../../col/index",
|
||||||
|
"van-tab": "../../tab/index",
|
||||||
|
"van-tabs": "../../tabs/index",
|
||||||
|
"van-icon": "../../icon/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,7 +1,3 @@
|
|||||||
page {
|
|
||||||
padding-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.col {
|
.col {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
float: none;
|
float: none;
|
||||||
272
packages/icon/demo/index.ts
Normal file
272
packages/icon/demo/index.ts
Normal file
@ -0,0 +1,272 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
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',
|
||||||
|
],
|
||||||
|
};
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
icons,
|
||||||
|
active: 0,
|
||||||
|
demoIcon: 'chat-o',
|
||||||
|
demoImage: 'https://b.yzcdn.cn/vant/icon-demo-1126.png',
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onSwitch(event) {
|
||||||
|
this.setData({
|
||||||
|
active: event.detail.index,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
156
packages/icon/demo/index.wxml
Normal file
156
packages/icon/demo/index.wxml
Normal file
@ -0,0 +1,156 @@
|
|||||||
|
<van-tabs
|
||||||
|
active="{{ active }}"
|
||||||
|
color="#1989fa"
|
||||||
|
bind:change="onSwitch"
|
||||||
|
>
|
||||||
|
<van-tab title="用法示例" custom-class="demo-tab-pane">
|
||||||
|
<demo-block title="基础用法">
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoImage }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="提示信息">
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
dot
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
info="9"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
info="99+"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="图标颜色">
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
color="#1989fa"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
color="#07c160"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block title="图标大小">
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="40"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ demoIcon }}"
|
||||||
|
size="3rem"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
</van-col>
|
||||||
|
</demo-block>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="基础图标" custom-class="demo-tab-pane">
|
||||||
|
<van-col
|
||||||
|
wx:for="{{ icons.basic }}"
|
||||||
|
wx:key="index"
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ item }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
<view class="text">{{ item }}</view>
|
||||||
|
</van-col>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="线框风格" custom-class="demo-tab-pane">
|
||||||
|
<van-col
|
||||||
|
wx:for="{{ icons.outline }}"
|
||||||
|
wx:key="index"
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ item }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
<view class="text">{{ item }}</view>
|
||||||
|
</van-col>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab title="实底风格" custom-class="demo-tab-pane">
|
||||||
|
<van-col
|
||||||
|
wx:for="{{ icons.filled }}"
|
||||||
|
wx:key="index"
|
||||||
|
custom-class="col"
|
||||||
|
span="6"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
name="{{ item }}"
|
||||||
|
size="32px"
|
||||||
|
custom-class="icon"
|
||||||
|
/>
|
||||||
|
<view class="text">{{ item }}</view>
|
||||||
|
</van-col>
|
||||||
|
</van-tab>
|
||||||
|
</van-tabs>
|
||||||
400
packages/icon/test/__snapshots__/demo.spec.ts.snap
Normal file
400
packages/icon/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`should render demo and match snapshot 1`] = `
|
||||||
|
<main>
|
||||||
|
<van-tabs
|
||||||
|
bind:change="onSwitch"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-tabs van-tabs--line"
|
||||||
|
>
|
||||||
|
<van-sticky
|
||||||
|
bind:scroll="onTouchScroll"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-sticky"
|
||||||
|
style="z-index:1"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-sticky-wrap"
|
||||||
|
style="z-index:1"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tabs__wrap "
|
||||||
|
>
|
||||||
|
<wx-scroll-view
|
||||||
|
class="van-tabs__scroll van-tabs__scroll--line"
|
||||||
|
scrollLeft="{{0}}"
|
||||||
|
scrollWithAnimation="{{false}}"
|
||||||
|
scrollX="{{false}}"
|
||||||
|
style="border-color: #1989fa"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tabs__nav van-tabs__nav--line nav-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tabs__line"
|
||||||
|
style="width:40px;transform:translateX(0px);-webkit-transform:translateX(0px);background-color:#1989fa"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="tab-class tab-active-class van-ellipsis van-tab van-tab--active"
|
||||||
|
data-index="{{0}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
用法示例
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="tab-class van-ellipsis van-tab"
|
||||||
|
data-index="{{1}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
基础图标
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="tab-class van-ellipsis van-tab"
|
||||||
|
data-index="{{2}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
线框风格
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="tab-class van-ellipsis van-tab"
|
||||||
|
data-index="{{3}}"
|
||||||
|
style=""
|
||||||
|
bind:tap="onTap"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-ellipsis"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
实底风格
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-scroll-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-sticky>
|
||||||
|
<wx-view
|
||||||
|
class="van-tabs__content"
|
||||||
|
bind:touchcancel="onTouchEnd"
|
||||||
|
bind:touchend="onTouchEnd"
|
||||||
|
bind:touchmove="onTouchMove"
|
||||||
|
bind:touchstart="onTouchStart"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-tabs__track van-tabs__track"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-tab
|
||||||
|
customClass="demo-tab-pane"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-tab__pane van-tab__pane--active"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
基础用法
|
||||||
|
</wx-view>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon--image"
|
||||||
|
style="font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="van-icon__image"
|
||||||
|
mode="aspectFit"
|
||||||
|
src="https://b.yzcdn.cn/vant/icon-demo-1126.png"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
提示信息
|
||||||
|
</wx-view>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<van-info
|
||||||
|
customClass="van-icon__info"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-info van-info van-info--dot custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
|
||||||
|
</wx-view>
|
||||||
|
</van-info>
|
||||||
|
</wx-view>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<van-info
|
||||||
|
customClass="van-icon__info"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-info van-info custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
9
|
||||||
|
</wx-view>
|
||||||
|
</van-info>
|
||||||
|
</wx-view>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<van-info
|
||||||
|
customClass="van-icon__info"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-info van-info custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
99+
|
||||||
|
</wx-view>
|
||||||
|
</van-info>
|
||||||
|
</wx-view>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
图标颜色
|
||||||
|
</wx-view>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="color:#1989fa;font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="color:#07c160;font-size:32px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix "
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
图标大小
|
||||||
|
</wx-view>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:40px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col
|
||||||
|
customClass="col"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--6 "
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-chat-o"
|
||||||
|
style="font-size:3rem"
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</wx-view>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab
|
||||||
|
customClass="demo-tab-pane"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-tab__pane van-tab__pane--inactive"
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab
|
||||||
|
customClass="demo-tab-pane"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-tab__pane van-tab__pane--inactive"
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
</van-tab>
|
||||||
|
<van-tab
|
||||||
|
customClass="demo-tab-pane"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-tab__pane van-tab__pane--inactive"
|
||||||
|
style="display: none;"
|
||||||
|
/>
|
||||||
|
</van-tab>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-tabs>
|
||||||
|
</main>
|
||||||
|
`;
|
||||||
11
packages/icon/test/demo.spec.ts
Normal file
11
packages/icon/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