mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 10:22:44 +08:00
test(Image): add demo test
This commit is contained in:
nemo-shen
neverland
parent
13df6519a4
commit
24017c1c88
@ -93,6 +93,7 @@
|
||||
"van-icon": "./dist/icon/index",
|
||||
"van-icon-demo": "./dist/icon/demo/index",
|
||||
"van-image": "./dist/image/index",
|
||||
"van-image-demo": "./dist/image/demo/index",
|
||||
"van-loading": "./dist/loading/index",
|
||||
"van-nav-bar": "./dist/nav-bar/index",
|
||||
"van-notice-bar": "./dist/notice-bar/index",
|
||||
|
||||
@ -1,16 +1,3 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
fits: [
|
||||
'contain',
|
||||
'cover',
|
||||
'fill',
|
||||
'none',
|
||||
'scale-down',
|
||||
'widthFix',
|
||||
'heightFix'
|
||||
],
|
||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg'
|
||||
}
|
||||
});
|
||||
Page();
|
||||
|
||||
@ -1,103 +1 @@
|
||||
|
||||
<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>
|
||||
|
||||
<van-image-demo />
|
||||
|
||||
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 {
|
||||
width: 100%;
|
||||
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