mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
test(Image): add demo test
This commit is contained in:
parent
13df6519a4
commit
24017c1c88
@ -93,6 +93,7 @@
|
|||||||
"van-icon": "./dist/icon/index",
|
"van-icon": "./dist/icon/index",
|
||||||
"van-icon-demo": "./dist/icon/demo/index",
|
"van-icon-demo": "./dist/icon/demo/index",
|
||||||
"van-image": "./dist/image/index",
|
"van-image": "./dist/image/index",
|
||||||
|
"van-image-demo": "./dist/image/demo/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",
|
||||||
"van-notice-bar": "./dist/notice-bar/index",
|
"van-notice-bar": "./dist/notice-bar/index",
|
||||||
|
@ -1,16 +1,3 @@
|
|||||||
import Page from '../../common/page';
|
import Page from '../../common/page';
|
||||||
|
|
||||||
Page({
|
Page();
|
||||||
data: {
|
|
||||||
fits: [
|
|
||||||
'contain',
|
|
||||||
'cover',
|
|
||||||
'fill',
|
|
||||||
'none',
|
|
||||||
'scale-down',
|
|
||||||
'widthFix',
|
|
||||||
'heightFix'
|
|
||||||
],
|
|
||||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
@ -1,103 +1 @@
|
|||||||
|
<van-image-demo />
|
||||||
<demo-block title="基础用法" padding>
|
|
||||||
<van-row>
|
|
||||||
<van-image
|
|
||||||
width="100"
|
|
||||||
height="100"
|
|
||||||
src="{{ src }}"
|
|
||||||
/>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="填充模式" padding>
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col
|
|
||||||
wx:for="{{ fits }}"
|
|
||||||
wx:for-item="fit"
|
|
||||||
wx:key="fit"
|
|
||||||
span="8"
|
|
||||||
>
|
|
||||||
<van-image
|
|
||||||
fit="{{ fit }}"
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
src="{{ src }}"
|
|
||||||
/>
|
|
||||||
<view class="text">{{ fit }}</view>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="圆形图片" padding>
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col
|
|
||||||
wx:for="{{ fits }}"
|
|
||||||
wx:for-item="fit"
|
|
||||||
wx:key="fit"
|
|
||||||
span="8"
|
|
||||||
>
|
|
||||||
<van-image
|
|
||||||
round
|
|
||||||
fit="{{ fit }}"
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
src="{{ src }}"
|
|
||||||
/>
|
|
||||||
<view class="text">{{ fit }}</view>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="加载中提示" padding>
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
/>
|
|
||||||
<view class="text">默认提示</view>
|
|
||||||
</van-col>
|
|
||||||
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
use-loading-slot
|
|
||||||
>
|
|
||||||
<van-loading
|
|
||||||
slot="loading"
|
|
||||||
type="spinner"
|
|
||||||
size="20"
|
|
||||||
vertical
|
|
||||||
/>
|
|
||||||
</van-image>
|
|
||||||
<view class="text">自定义提示</view>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
<demo-block title="加载失败提示" padding>
|
|
||||||
<van-row gutter="20">
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
src="x"
|
|
||||||
/>
|
|
||||||
<view class="text">默认提示</view>
|
|
||||||
</van-col>
|
|
||||||
|
|
||||||
<van-col span="8">
|
|
||||||
<van-image
|
|
||||||
width="100%"
|
|
||||||
height="27vw"
|
|
||||||
src="x"
|
|
||||||
use-error-slot
|
|
||||||
>
|
|
||||||
<text slot="error">加载失败</text>
|
|
||||||
</van-image>
|
|
||||||
<view class="text">自定义提示</view>
|
|
||||||
</van-col>
|
|
||||||
</van-row>
|
|
||||||
</demo-block>
|
|
||||||
|
|
||||||
|
10
packages/image/demo/index.json
Normal file
10
packages/image/demo/index.json
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"component": true,
|
||||||
|
"usingComponents": {
|
||||||
|
"van-row": "../../row/index",
|
||||||
|
"van-col": "../../col/index",
|
||||||
|
"van-image": "../../image/index",
|
||||||
|
"van-loading": "../../loading/index",
|
||||||
|
"demo-block": "../../../example/components/demo-block/index"
|
||||||
|
}
|
||||||
|
}
|
@ -1,7 +1,3 @@
|
|||||||
page {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 5px 0 20px;
|
margin: 5px 0 20px;
|
16
packages/image/demo/index.ts
Normal file
16
packages/image/demo/index.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { VantComponent } from '../../common/component';
|
||||||
|
|
||||||
|
VantComponent({
|
||||||
|
data: {
|
||||||
|
fits: [
|
||||||
|
'contain',
|
||||||
|
'cover',
|
||||||
|
'fill',
|
||||||
|
'none',
|
||||||
|
'scale-down',
|
||||||
|
'widthFix',
|
||||||
|
'heightFix',
|
||||||
|
],
|
||||||
|
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||||
|
},
|
||||||
|
});
|
101
packages/image/demo/index.wxml
Normal file
101
packages/image/demo/index.wxml
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
<demo-block title="基础用法" padding>
|
||||||
|
<van-row>
|
||||||
|
<van-image
|
||||||
|
width="100"
|
||||||
|
height="100"
|
||||||
|
src="{{ src }}"
|
||||||
|
/>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="填充模式" padding>
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col
|
||||||
|
wx:for="{{ fits }}"
|
||||||
|
wx:for-item="fit"
|
||||||
|
wx:key="fit"
|
||||||
|
span="8"
|
||||||
|
>
|
||||||
|
<van-image
|
||||||
|
fit="{{ fit }}"
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
src="{{ src }}"
|
||||||
|
/>
|
||||||
|
<view class="text">{{ fit }}</view>
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="圆形图片" padding>
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col
|
||||||
|
wx:for="{{ fits }}"
|
||||||
|
wx:for-item="fit"
|
||||||
|
wx:key="fit"
|
||||||
|
span="8"
|
||||||
|
>
|
||||||
|
<van-image
|
||||||
|
round
|
||||||
|
fit="{{ fit }}"
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
src="{{ src }}"
|
||||||
|
/>
|
||||||
|
<view class="text">{{ fit }}</view>
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="加载中提示" padding>
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col span="8">
|
||||||
|
<van-image
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
/>
|
||||||
|
<view class="text">默认提示</view>
|
||||||
|
</van-col>
|
||||||
|
|
||||||
|
<van-col span="8">
|
||||||
|
<van-image
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
use-loading-slot
|
||||||
|
>
|
||||||
|
<van-loading
|
||||||
|
slot="loading"
|
||||||
|
type="spinner"
|
||||||
|
size="20"
|
||||||
|
vertical
|
||||||
|
/>
|
||||||
|
</van-image>
|
||||||
|
<view class="text">自定义提示</view>
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
||||||
|
|
||||||
|
<demo-block title="加载失败提示" padding>
|
||||||
|
<van-row gutter="20">
|
||||||
|
<van-col span="8">
|
||||||
|
<van-image
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
src="x"
|
||||||
|
/>
|
||||||
|
<view class="text">默认提示</view>
|
||||||
|
</van-col>
|
||||||
|
|
||||||
|
<van-col span="8">
|
||||||
|
<van-image
|
||||||
|
width="100%"
|
||||||
|
height="27vw"
|
||||||
|
src="x"
|
||||||
|
use-error-slot
|
||||||
|
>
|
||||||
|
<text slot="error">加载失败</text>
|
||||||
|
</van-image>
|
||||||
|
<view class="text">自定义提示</view>
|
||||||
|
</van-col>
|
||||||
|
</van-row>
|
||||||
|
</demo-block>
|
926
packages/image/test/__snapshots__/demo.spec.ts.snap
Normal file
926
packages/image/test/__snapshots__/demo.spec.ts.snap
Normal file
@ -0,0 +1,926 @@
|
|||||||
|
// 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 demo-block--padding"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
基础用法
|
||||||
|
</wx-view>
|
||||||
|
<van-row>
|
||||||
|
<wx-view
|
||||||
|
class="van-row custom-class"
|
||||||
|
style=""
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100px;height:100px"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
</wx-view>
|
||||||
|
</van-row>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
填充模式
|
||||||
|
</wx-view>
|
||||||
|
<van-row>
|
||||||
|
<wx-view
|
||||||
|
class="van-row custom-class"
|
||||||
|
style="margin-right:-10px;margin-left:-10px"
|
||||||
|
>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="aspectFit"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
contain
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="aspectFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
cover
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
fill
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="center"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
none
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode=""
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
scale-down
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="widthFix"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
widthFix
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="heightFix"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
heightFix
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</van-row>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
圆形图片
|
||||||
|
</wx-view>
|
||||||
|
<van-row>
|
||||||
|
<wx-view
|
||||||
|
class="van-row custom-class"
|
||||||
|
style="margin-right:-10px;margin-left:-10px"
|
||||||
|
>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="aspectFit"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
contain
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="aspectFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
cover
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
fill
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="center"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
none
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode=""
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
scale-down
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="widthFix"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
widthFix
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image van-image--round"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="heightFix"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
heightFix
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</van-row>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
加载中提示
|
||||||
|
</wx-view>
|
||||||
|
<van-row>
|
||||||
|
<wx-view
|
||||||
|
class="van-row custom-class"
|
||||||
|
style="margin-right:-10px;margin-left:-10px"
|
||||||
|
>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src=""
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
默认提示
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src=""
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-loading
|
||||||
|
slot="loading"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-loading van-loading--vertical"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__spinner van-loading__spinner--spinner"
|
||||||
|
style="width:20px;height:20px"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__dot"
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
<wx-view
|
||||||
|
class="van-loading__text"
|
||||||
|
style=""
|
||||||
|
/>
|
||||||
|
</wx-view>
|
||||||
|
</van-loading>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
自定义提示
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</van-row>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
<demo-block>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class demo-block van-clearfix demo-block--padding"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="demo-block__title"
|
||||||
|
>
|
||||||
|
加载失败提示
|
||||||
|
</wx-view>
|
||||||
|
<van-row>
|
||||||
|
<wx-view
|
||||||
|
class="van-row custom-class"
|
||||||
|
style="margin-right:-10px;margin-left:-10px"
|
||||||
|
>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="x"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
默认提示
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
<van-col>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-col van-col--8 "
|
||||||
|
style="padding-right:10px;padding-left:10px"
|
||||||
|
>
|
||||||
|
<van-image>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-image"
|
||||||
|
style="width:100%;height:27vw"
|
||||||
|
bind:tap="onClick"
|
||||||
|
>
|
||||||
|
<wx-image
|
||||||
|
class="image-class van-image__img"
|
||||||
|
lazyLoad="{{false}}"
|
||||||
|
mode="scaleToFill"
|
||||||
|
showMenuByLongpress="{{false}}"
|
||||||
|
src="x"
|
||||||
|
bind:error="onError"
|
||||||
|
bind:load="onLoad"
|
||||||
|
/>
|
||||||
|
<wx-view
|
||||||
|
class="loading-class van-image__loading"
|
||||||
|
>
|
||||||
|
<van-icon
|
||||||
|
customClass="van-image__loading-icon"
|
||||||
|
>
|
||||||
|
<wx-view
|
||||||
|
class="custom-class van-icon van-icon-photo"
|
||||||
|
style=""
|
||||||
|
bind:tap="onClick"
|
||||||
|
/>
|
||||||
|
</van-icon>
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-image>
|
||||||
|
<wx-view
|
||||||
|
class="text"
|
||||||
|
>
|
||||||
|
自定义提示
|
||||||
|
</wx-view>
|
||||||
|
</wx-view>
|
||||||
|
</van-col>
|
||||||
|
</wx-view>
|
||||||
|
</van-row>
|
||||||
|
</wx-view>
|
||||||
|
</demo-block>
|
||||||
|
</main>
|
||||||
|
`;
|
11
packages/image/test/demo.spec.ts
Normal file
11
packages/image/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