[new feature] Image: add round prop (#3838)
This commit is contained in:
@@ -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` | - | - |
|
||||
|
||||
Reference in New Issue
Block a user