[new feature] Image: add round prop (#3838)

This commit is contained in:
一颗红心
2019-07-18 17:12:27 +08:00
committed by neverland
parent 3f33fcc525
commit e1021e70ba
6 changed files with 95 additions and 3 deletions
+16 -2
View File
@@ -2,7 +2,7 @@
### 介绍
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示
增强版的 img 标签,提供多种图片填充模式,支持图片懒加载、加载中提示、加载失败提示
### 引入
@@ -39,6 +39,19 @@ Vue.use(Image);
/>
```
### 圆形图片
通过`round`属性可以设置图片变圆
```html
<van-image
round
width="10rem"
height="10rem"
src="https://img.yzcdn.cn/vant/cat.jpeg"
/>
```
### 图片懒加载
设置`lazy-load`属性来开启图片懒加载,需要搭配 [Lazyload](#/zh-CN/lazyload) 组件使用
@@ -81,7 +94,8 @@ Vue.use(Image);
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
| src | 图片链接 | `string` | - | - |
| fit | 图片填充模式 | `string` | `fill` | - |
| fit | 图片填充模式 | `string` | `fill` | - |
| round | 圆形图片,当图片宽高不相等时 `fit=contain` 和 `fit=scale-down` 可能无法实现「圆形」图片 | `boolean` | `false` | - |
| alt | 替代文本 | `string` | - | - |
| width | 宽度,默认单位为 px | `string | number` | - | - |
| height | 高度,默认单位为 px | `string | number` | - | - |