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-button": "./dist/goods-action-button/index",
|
||||
"van-icon": "./dist/icon/index",
|
||||
"van-icon-demo": "./dist/icon/demo/index",
|
||||
"van-image": "./dist/image/index",
|
||||
"van-loading": "./dist/loading/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';
|
||||
|
||||
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
|
||||
});
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,156 +1 @@
|
||||
<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>
|
||||
<van-icon-demo />
|
||||
|
||||
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 {
|
||||
display: inline-block;
|
||||
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