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

feat(Image): add radius prop (#2407)

Browse Source
This commit is contained in:
neverland 2019-11-27 15:57:36 +08:00 committed by GitHub
parent 7821477518
commit 8f6f61e208
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 28 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/image/README.md
View File

@ -1,5 +1,11 @@
# Image 图片 # Image 图片
### 介绍
增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
使用此组件需要升级至 1.0 以上版本。
### 引入 ### 引入
在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian) 在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
@ -94,18 +100,19 @@
| 参数 | 说明 | 类型 | 默认值 | 版本 | | 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------| |------|------|------|------|------|
| src | 图片链接 | `string` | - | - | | src | 图片链接 | *string* | - | - |
| fit | 图片填充模式 | `string` | `fill` | - | | fit | 图片填充模式 | *string* | *fill* | - |
| alt | 替代文本 | `string` | - | - | | alt | 替代文本 | *string* | - | - |
| width | 宽度，默认单位为`px` | `string | number` | - | - | | width | 宽度，默认单位为`px` | *string \| number* | - | - |
| height | 高度，默认单位为`px` | `string | number` | - | - | | height | 高度，默认单位为`px` | *string \| number* | - | - |
| round | 是否显示为圆形 | `boolean` | `false` | - | | radius | 圆角大小，默认单位为`px` | *string \| number* | `0` | - |
| lazy-load | 是否懒加载 | `boolean` | `false` | - | | round | 是否显示为圆形 | *boolean* | `false` | - |
| show-error | 是否展示图片加载失败提示 | `boolean` | `true` | - | | lazy-load | 是否懒加载 | *boolean* | `false` | - |
| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | - | | show-error | 是否展示图片加载失败提示 | *boolean* | `true` | - |
| use-error-slot | 是否使用 error 插槽 | `boolean` | `false` | - | | show-loading | 是否展示图片加载中提示 | *boolean* | `true` | - |
| use-loading-slot | 是否使用 loading 插槽 | `boolean` | `false` | - | | use-error-slot | 是否使用 error 插槽 | *boolean* | `false` | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | `boolean` | `false` | - | | use-loading-slot | 是否使用 loading 插槽 | *boolean* | `false` | - |
| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | *boolean* | `false` | - |
### 图片填充模式 ### 图片填充模式

12
packages/image/index.ts
View File

@ -18,8 +18,9 @@ VantComponent({
props: { props: {
src: String, src: String,
round: Boolean, round: Boolean,
width: String, width: null,
height: String, height: null,
radius: null,
lazyLoad: Boolean, lazyLoad: Boolean,
useErrorSlot: Boolean, useErrorSlot: Boolean,
useLoadingSlot: Boolean, useLoadingSlot: Boolean,
@ -65,7 +66,7 @@ VantComponent({
}, },
getStyle() { getStyle() {
const { width, height } = this.data; const { width, height, radius } = this.data;
let style = ''; let style = '';
if (isDef(width)) { if (isDef(width)) {
@ -76,6 +77,11 @@ VantComponent({
style += `height: ${addUnit(height)};`; style += `height: ${addUnit(height)};`;
} }
if (isDef(radius)) {
style += 'overflow: hidden;';
style += `border-radius: ${addUnit(radius)};`;
}
return style; return style;
}, },