From 8f6f61e20863918a669d4d4dfab0f5f3cca8fdc3 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Wed, 27 Nov 2019 15:57:36 +0800
Subject: [PATCH] feat(Image): add radius prop (#2407)

---
 packages/image/README.md | 31 +++++++++++++++++++------------
 packages/image/index.ts  | 12 +++++++++---
 2 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/packages/image/README.md b/packages/image/README.md
index 07d319a5..e7405b13 100644
--- a/packages/image/README.md
+++ b/packages/image/README.md
@@ -1,5 +1,11 @@
 # Image 图片
 
+### 介绍
+
+增强版的 img 标签，提供多种图片填充模式，支持图片懒加载、加载中提示、加载失败提示。
+
+使用此组件需要升级至 1.0 以上版本。
+
 ### 引入
 
 在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](#/quickstart#yin-ru-zu-jian)
@@ -94,18 +100,19 @@
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
-| 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` | - |
-| use-error-slot | 是否使用 error 插槽 | `boolean` | `false` | - |
-| use-loading-slot | 是否使用 loading 插槽 | `boolean` | `false` | - |
-| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | `boolean` | `false` | - |
+| src | 图片链接 | *string* | - | - |
+| fit | 图片填充模式 | *string* | *fill* | - |
+| alt | 替代文本 | *string* | - | - |
+| width | 宽度，默认单位为`px` | *string \| number* | - | - |
+| height | 高度，默认单位为`px` | *string \| number* | - | - |
+| radius | 圆角大小，默认单位为`px` | *string \| number* | `0` | - |
+| round | 是否显示为圆形 | *boolean* | `false` | - |
+| lazy-load | 是否懒加载 | *boolean* | `false` | - |
+| show-error | 是否展示图片加载失败提示 | *boolean* | `true` | - |
+| show-loading | 是否展示图片加载中提示 | *boolean* | `true` | - |
+| use-error-slot | 是否使用 error 插槽 | *boolean* | `false` | - |
+| use-loading-slot | 是否使用 loading 插槽 | *boolean* | `false` | - |
+| show-menu-by-longpress | 是否开启长按图片显示识别小程序码菜单 | *boolean* | `false` | - |
 
 ### 图片填充模式
 
diff --git a/packages/image/index.ts b/packages/image/index.ts
index 625c36fb..9bf61d14 100644
--- a/packages/image/index.ts
+++ b/packages/image/index.ts
@@ -18,8 +18,9 @@ VantComponent({
   props: {
     src: String,
     round: Boolean,
-    width: String,
-    height: String,
+    width: null,
+    height: null,
+    radius: null,
     lazyLoad: Boolean,
     useErrorSlot: Boolean,
     useLoadingSlot: Boolean,
@@ -65,7 +66,7 @@ VantComponent({
     },
 
     getStyle() {
-      const { width, height } = this.data;
+      const { width, height, radius } = this.data;
       let style = '';
 
       if (isDef(width)) {
@@ -76,6 +77,11 @@ VantComponent({
         style += `height: ${addUnit(height)};`;
       }
 
+      if (isDef(radius)) {
+        style += 'overflow: hidden;';
+        style += `border-radius: ${addUnit(radius)};`;
+      }
+
       return style;
     },