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

src/image/README.md

@@ -73,6 +73,7 @@ Vue.use(Lazyload);
 | alt | Alt | `string` | - | - |
 | width | Width | `string | number` | - | - |
 | height | Height | `string | number` | - | - |
+| radius | Border Radius | `string | number` | `0` | - |
 | round | Whether to be round | `boolean` | `false` | - |
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | `boolean` | `false` | - |
 | show-error | Whether to show error placeholder | `boolean` | `true` |

src/image/README.zh-CN.md

@@ -99,10 +99,11 @@ Vue.use(Image);
 | alt | 替代文本 | `string` | - | - |
 | width | 宽度，默认单位为`px` | `string | number` | - | - |
 | height | 高度，默认单位为`px` | `string | number` | - | - |
+| radius | 圆角大小，默认单位为`px` | `string | number` | `0` | 2.1.6 |
 | round | 是否显示为圆形 | `boolean` | `false` | - |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `boolean` | `false` | - |
 | show-error | 是否展示图片加载失败提示 | `boolean` | `true` | 2.0.9 |
-| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | `2.0.9` |
+| show-loading | 是否展示图片加载中提示 | `boolean` | `true` | 2.0.9 |
 
 ### 图片填充模式
 

src/image/index.js

@@ -11,6 +11,7 @@ export default createComponent({
     round: Boolean,
     width: [Number, String],
     height: [Number, String],
+    radius: [Number, String],
     lazyLoad: Boolean,
     showError: {
       type: Boolean,
@@ -48,6 +49,11 @@ export default createComponent({
         style.height = addUnit(this.height);
       }
 
+      if (isDef(this.radius)) {
+        style.overflow = 'hidden';
+        style.borderRadius = addUnit(this.radius);
+      }
+
       return style;
     }
   },

src/image/test/__snapshots__/index.spec.js.snap

@@ -25,6 +25,13 @@ exports[`load event 2`] = `
 </div>
 `;
 
-exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
+exports[`radius prop 1`] = `
+<div class="van-image" style="overflow: hidden; border-radius: 3px;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img">
+  <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+      <!----></i></div>
+</div>
+`;
 
 exports[`show-error prop 1`] = `<div class="van-image"></div>`;
+
+exports[`show-loading prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;

src/image/test/index.spec.js

@@ -124,3 +124,14 @@ test('show-error prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('radius prop', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      radius: 3,
+      src: 'https://img.yzcdn.cn/vant/cat.jpeg'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});