blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-26 11:26:35 +08:00
Code Issues Projects Releases Wiki Activity

[Doc] Image: update document (#3518)

Browse Source
This commit is contained in:
neverland 2019-06-14 20:46:27 +08:00 committed by GitHub
parent da514e100d
commit 13ed8b2c7c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
packages/image/zh-CN.md
View File

@ -1,5 +1,9 @@
# Image 图片 # Image 图片
### 介绍
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示
### 引入 ### 引入
``` javascript ``` javascript
@ -12,6 +16,8 @@ Vue.use(Image);
### 基础用法 ### 基础用法
基础用法与原生`img`标签一致，可以设置`src`、`width`、`height`、`alt`等原生属性
```html ```html
<van-image <van-image
width="100" width="100"
@ -22,6 +28,8 @@ Vue.use(Image);
### 填充模式 ### 填充模式
通过`fit`属性可以设置图片填充模式，可选值见下方表格
```html ```html
<van-image <van-image
width="10rem" width="10rem"
@ -33,6 +41,8 @@ Vue.use(Image);
### 图片懒加载 ### 图片懒加载
设置`lazy-load`属性来开启图片懒加载，需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
```html ```html
<van-image <van-image
width="100" width="100"
@ -42,15 +52,9 @@ Vue.use(Image);
/> />
``` ```
```js
import { Lazyload } from 'vant';
Vue.use(Lazyload);
```
### 加载中提示 ### 加载中提示
`Image`组件提供了默认的加载中提示，可以通过`loading`插槽自定义加载中提示 `Image`组件提供了默认的加载中提示，支持通过`loading`插槽自定义内容
```html ```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg"> <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
@ -62,13 +66,11 @@ Vue.use(Lazyload);
### 加载失败提示 ### 加载失败提示
`Image`组件提供了默认的加载失败提示，可以通过`error`插槽自定义加载失败提示 `Image`组件提供了默认的加载失败提示，支持通过`error`插槽自定义内容
```html ```html
<van-image src="https://img.yzcdn.cn/vant/cat.jpeg"> <van-image src="https://img.yzcdn.cn/vant/cat.jpeg">
<template v-slot:error> <template v-slot:error>加载失败</template>
<van-icon name="close" size="20" />
</template>
</van-image> </van-image>
``` ```