mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-05 19:41:45 +08:00
feat(Image): add Image component (#2176)
This commit is contained in:
nrz
neverland
parent
3c4d2e63d8
commit
a1405a9b4a
@ -10,6 +10,7 @@
|
||||
"pages/dialog/index",
|
||||
"pages/field/index",
|
||||
"pages/icon/index",
|
||||
"pages/image/index",
|
||||
"pages/loading/index",
|
||||
"pages/nav-bar/index",
|
||||
"pages/notice-bar/index",
|
||||
@ -70,6 +71,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-image": "./dist/image/index",
|
||||
"van-loading": "./dist/loading/index",
|
||||
"van-nav-bar": "./dist/nav-bar/index",
|
||||
"van-notice-bar": "./dist/notice-bar/index",
|
||||
|
||||
@ -15,6 +15,10 @@ export default [
|
||||
path: '/icon',
|
||||
title: 'Icon 图标'
|
||||
},
|
||||
{
|
||||
path: '/image',
|
||||
title: 'Image 图片'
|
||||
},
|
||||
{
|
||||
path: '/col',
|
||||
title: 'Layout 布局'
|
||||
|
||||
8
example/pages/image/index.js
Normal file
8
example/pages/image/index.js
Normal file
@ -0,0 +1,8 @@
|
||||
import Page from '../../common/page';
|
||||
|
||||
Page({
|
||||
data: {
|
||||
fits: ['contain', 'cover', 'fill', 'none', 'scale-down'],
|
||||
src: 'https://img.yzcdn.cn/vant/cat.jpeg',
|
||||
}
|
||||
});
|
||||
3
example/pages/image/index.json
Normal file
3
example/pages/image/index.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"navigationBarTitleText": "Image 图片"
|
||||
}
|
||||
103
example/pages/image/index.wxml
Normal file
103
example/pages/image/index.wxml
Normal file
@ -0,0 +1,103 @@
|
||||
<demo-section>
|
||||
<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>
|
||||
</demo-section>
|
||||
7
example/pages/image/index.wxss
Normal file
7
example/pages/image/index.wxss
Normal file
@ -0,0 +1,7 @@
|
||||
.text {
|
||||
width: 100%;
|
||||
margin-top: 5px;
|
||||
color: #7d7e80;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
}
|
||||
@ -138,6 +138,11 @@
|
||||
@count-down-font-size: @font-size-md;
|
||||
@count-down-line-height: 20px;
|
||||
|
||||
// Image
|
||||
@image-placeholder-text-color: @gray-dark;
|
||||
@image-placeholder-font-size: @font-size-md;
|
||||
@image-placeholder-background-color: @background-color;
|
||||
|
||||
// Info
|
||||
@info-size: 16px;
|
||||
@info-color: @white;
|
||||
|
||||
142
packages/image/README.md
Normal file
142
packages/image/README.md
Normal file
@ -0,0 +1,142 @@
|
||||
# Image 图片
|
||||
|
||||
### 引入
|
||||
|
||||
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
|
||||
|
||||
```json
|
||||
"usingComponents": {
|
||||
"van-image": "path/to/vant-weapp/dist/image/index"
|
||||
}
|
||||
```
|
||||
|
||||
## 代码演示
|
||||
|
||||
### 基础用法
|
||||
|
||||
基础用法与[原生](https://developers.weixin.qq.com/miniprogram/dev/component/image.html)image一致，可以设置`src`、`width`、`height`等原生属性
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
height="100"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
```
|
||||
|
||||
### 填充模式
|
||||
|
||||
通过`fit`属性可以设置图片填充模式，可选值见下方表格
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="10rem"
|
||||
height="10rem"
|
||||
fit="contain"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
```
|
||||
|
||||
### 圆形图片
|
||||
|
||||
通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
|
||||
|
||||
```html
|
||||
<van-image
|
||||
round
|
||||
width="10rem"
|
||||
height="10rem"
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
```
|
||||
|
||||
### 图片懒加载
|
||||
|
||||
图片懒加载，在即将进入一定范围（上下三屏）时才开始加载
|
||||
|
||||
```html
|
||||
<van-image
|
||||
width="100"
|
||||
height="100"
|
||||
lazy-load
|
||||
src="https://img.yzcdn.cn/vant/cat.jpeg"
|
||||
/>
|
||||
```
|
||||
|
||||
### 加载中提示
|
||||
|
||||
`Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
|
||||
|
||||
```html
|
||||
<van-image use-loading-slot>
|
||||
<van-loading
|
||||
slot="loading"
|
||||
type="spinner"
|
||||
size="20"
|
||||
vertical
|
||||
/>
|
||||
</van-image>
|
||||
```
|
||||
|
||||
### 加载失败提示
|
||||
|
||||
`Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
|
||||
|
||||
```html
|
||||
<van-image use-error-slot>
|
||||
<text slot="error">加载失败</text>
|
||||
</van-image>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
|------|------|------|------|------|
|
||||
| src | 图片链接 | `string` | - | - |
|
||||
| fit | 图片填充模式 | `string` | `fill` | - |
|
||||
| alt | 替代文本 | `string` | - | - |
|
||||
| width | 宽度，默认单位为`px` | `string | number` | - | - |
|
||||
| height | 高度，默认单位为`px` | `string | number` | - | - |
|
||||
| round | 是否显示为圆形 | `boolean` | `false` | - |
|
||||
| lazy-load | 是否懒加载 | `boolean` | `false` | - |
|
||||
| show-error | 是否展示图片加载失败提示 | `boolean` | `true` | - |
|
||||
| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | - |
|
||||
| show-menu-by-longpress | 开启长按图片显示识别小程序码菜单 | `boolean` | `false` | - |
|
||||
| use-loading-slot | 是否使用了loading slot | `boolean` | `false` | - |
|
||||
| use-error-slot | 是否使用了error slot | `boolean` | `false` | - |
|
||||
|
||||
### 图片填充模式
|
||||
|
||||
| 名称 | 含义 |
|
||||
|------|------|
|
||||
| contain | 保持宽高缩放图片，使图片的长边能完全显示出来 |
|
||||
| cover | 保持宽高缩放图片，使图片的短边能完全显示出来，裁剪长边 |
|
||||
| fill | 拉伸图片，使图片填满元素 |
|
||||
| none | 保持图片原有尺寸 |
|
||||
| scale-down | 由于小程序原生不支持这个属性，所以暂时和contain保持一致 |
|
||||
|
||||
### Events
|
||||
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
|------|------|------|
|
||||
| click | 点击图片时触发 | event: Event |
|
||||
| load | 图片加载完毕时触发 | event: Event |
|
||||
| error | 图片加载失败时触发 | event: Event |
|
||||
|
||||
### Slots
|
||||
|
||||
| 名称 | 说明 |
|
||||
|------|------|
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
|
||||
### 外部样式类
|
||||
|
||||
| 类名 | 说明 |
|
||||
|-----------|-----------|
|
||||
| custom-class | 根节点样式类 |
|
||||
| image-class | 图片样式类 |
|
||||
| loading-class | loading样式类 |
|
||||
| error-class | error样式类 |
|
||||
7
packages/image/index.json
Normal file
7
packages/image/index.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {
|
||||
"van-icon": "../icon/index",
|
||||
"van-loading": "../loading/index"
|
||||
}
|
||||
}
|
||||
37
packages/image/index.less
Normal file
37
packages/image/index.less
Normal file
@ -0,0 +1,37 @@
|
||||
@import '../common/style/var.less';
|
||||
|
||||
.van-image {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&--round {
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
|
||||
.van-image__img {
|
||||
border-radius: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__img,
|
||||
&__error,
|
||||
&__loading {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&__error,
|
||||
&__loading {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: @image-placeholder-text-color;
|
||||
font-size: @image-placeholder-font-size;
|
||||
background-color: @image-placeholder-background-color;
|
||||
}
|
||||
}
|
||||
110
packages/image/index.ts
Normal file
110
packages/image/index.ts
Normal file
@ -0,0 +1,110 @@
|
||||
import { addUnit, isDef } from '../common/utils';
|
||||
import { VantComponent } from '../common/component';
|
||||
import { button } from '../mixins/button';
|
||||
import { openType } from '../mixins/open-type';
|
||||
|
||||
VantComponent({
|
||||
mixins: [button, openType],
|
||||
|
||||
classes: ['custom-class', 'loading-class', 'error-class', 'image-class'],
|
||||
|
||||
props: {
|
||||
src: String,
|
||||
width: String,
|
||||
height: String,
|
||||
fit: {
|
||||
type: String,
|
||||
value: 'fill'
|
||||
},
|
||||
round: Boolean,
|
||||
lazyLoad: Boolean,
|
||||
showError: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
showMenuByLongpress: Boolean,
|
||||
|
||||
// 受小程序slot限制所需要的属性
|
||||
useLoadingSlot: Boolean,
|
||||
useErrorSlot: Boolean,
|
||||
},
|
||||
|
||||
data: {
|
||||
fitWeapp: 'aspectFit',
|
||||
FIT_MODE_MAP: {
|
||||
contain: 'aspectFit',
|
||||
cover: 'aspectFill',
|
||||
fill: 'scaleToFill',
|
||||
none: 'center',
|
||||
|
||||
// TODO: 这个没有原生的属性，需要后面实现，暂时先用contain;
|
||||
'scale-down': 'aspectFit'
|
||||
},
|
||||
loading: true,
|
||||
error: false
|
||||
},
|
||||
|
||||
watch: {
|
||||
src() {
|
||||
this.setData({
|
||||
loading: true,
|
||||
error: false
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
init() {
|
||||
const { FIT_MODE_MAP, fit } = this.data;
|
||||
|
||||
this.setData({
|
||||
mode: FIT_MODE_MAP[fit],
|
||||
style: this.getStyle(),
|
||||
});
|
||||
},
|
||||
|
||||
getStyle() {
|
||||
const { width, height } = this.data;
|
||||
let style = '';
|
||||
|
||||
if (isDef(width)) {
|
||||
style += `width: ${addUnit(width)};`;
|
||||
}
|
||||
|
||||
if (isDef(height)) {
|
||||
style += `height: ${addUnit(height)};`;
|
||||
}
|
||||
|
||||
return style;
|
||||
},
|
||||
|
||||
onLoad(event) {
|
||||
this.setData({
|
||||
loading: false
|
||||
});
|
||||
|
||||
this.$emit('load', event.detail);
|
||||
},
|
||||
|
||||
onError(event) {
|
||||
this.setData({
|
||||
loading: false,
|
||||
error: true,
|
||||
});
|
||||
|
||||
this.$emit('error', event.detail);
|
||||
},
|
||||
|
||||
onClick(event) {
|
||||
this.$emit('click', event.detail);
|
||||
},
|
||||
}
|
||||
});
|
||||
47
packages/image/index.wxml
Normal file
47
packages/image/index.wxml
Normal file
@ -0,0 +1,47 @@
|
||||
<wxs src="../wxs/utils.wxs" module="utils" />
|
||||
|
||||
<view
|
||||
class="custom-class {{ utils.bem('image', { round })}}"
|
||||
style="{{ style }}"
|
||||
bind:tap="onClick"
|
||||
>
|
||||
<image
|
||||
wx:if="{{ !error }}"
|
||||
class="image-class van-image__img"
|
||||
mode="{{ mode }}"
|
||||
src="{{ src }}"
|
||||
lazy-load="{{ lazyLoad }}"
|
||||
show-menu-by-longpress="{{ showMenuByLongpress }}"
|
||||
bind:load="onLoad"
|
||||
bind:error="onError"
|
||||
/>
|
||||
|
||||
<div
|
||||
wx:if="{{ loading && showLoading }}"
|
||||
class="loading-class van-image__loading"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useLoadingSlot }}"
|
||||
name="loading"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="photo-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
wx:if="{{ error && showError }}"
|
||||
class="error-class van-image__error"
|
||||
>
|
||||
<slot
|
||||
wx:if="{{ useErrorSlot }}"
|
||||
name="error"
|
||||
/>
|
||||
<van-icon
|
||||
wx:else
|
||||
name="warning-o"
|
||||
size="22"
|
||||
/>
|
||||
</div>
|
||||
</view>
|
||||
Loading…
x
Reference in New Issue
Block a user