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

src/image/README.md

@@ -31,6 +31,17 @@ Vue.use(Image);
 />
 ```
 
+### Round
+
+```html
+<van-image
+  round
+  width="10rem"
+  height="10rem"
+  src="https://img.yzcdn.cn/vant/cat.jpeg"
+/>
+```
+
 ### Lazy Load
 
 ```html
@@ -56,6 +67,7 @@ Vue.use(Lazyload);
 |------|------|------|------|
 | src | Src | `string` | - | - |
 | fit | Fit mode | `string` | `fill` | - |
+| round | Round，when img width not eq height it may not works at `fit=contain` and `fit=scale-down`  | `boolean` | `false` | - |
 | alt | Alt | `string` | - | - |
 | width | Width | `string | number` | - | - |
 | height | Height | `string | number` | - | - |

src/image/README.zh-CN.md

@@ -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` | - | - |

src/image/demo/index.vue

@@ -28,6 +28,25 @@
       </van-row>
     </demo-block>
 
+    <demo-block :title="$t('round')">
+      <van-row gutter="20">
+        <van-col
+          v-for="fit in fits"
+          span="8"
+          :key="fit"
+        >
+          <van-image
+            round
+            :fit="fit"
+            width="100%"
+            height="27vw"
+            :src="image"
+          />
+          <div class="text">{{ fit }}</div>
+        </van-col>
+      </van-row>
+    </demo-block>
+
     <demo-block :title="$t('loading')">
       <van-row gutter="20">
         <van-col span="8">
@@ -86,6 +105,7 @@ export default {
   i18n: {
     'zh-CN': {
       fitMode: '填充模式',
+      round: '圆形图片',
       loading: '加载中提示',
       error: '加载失败提示',
       defaultTip: '默认提示',
@@ -94,6 +114,7 @@ export default {
     },
     'en-US': {
       fitMode: 'Fit Mode',
+      round: 'Round',
       loading: 'Loading',
       error: 'Error',
       defaultTip: 'Default Tip',

src/image/index.js

@@ -5,6 +5,7 @@ const [createComponent, bem] = createNamespace('image');
 
 export default createComponent({
   props: {
+    round: Boolean,
     src: String,
     fit: String,
     alt: String,
@@ -134,7 +135,7 @@ export default createComponent({
 
   render(h) {
     return (
-      <div class={bem()} style={this.style} onClick={this.onClick}>
+      <div class={bem({ round: this.round })} style={this.style} onClick={this.onClick}>
         {this.renderImage()}
         {this.renderPlaceholder()}
       </div>

src/image/index.less

@@ -4,6 +4,11 @@
   position: relative;
   display: inline-block;
 
+  &--round {
+    overflow: hidden;
+    border-radius: 50%;
+  }
+
   &__img,
   &__error,
   &__loading {

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

@@ -49,6 +49,45 @@ exports[`renders demo correctly 1`] = `
       </div>
     </div>
   </div>
+  <div>
+    <div class="van-row" style="margin-left: -10px; margin-right: -10px;">
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: contain;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <div class="text">contain</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: cover;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <div class="text">cover</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: fill;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <div class="text">fill</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: none;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <div class="text">none</div>
+      </div>
+      <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">
+        <div class="van-image van-image--round" style="width: 100%; height: 27vw;"><img src="https://img.yzcdn.cn/vant/cat.jpeg" class="van-image__img" style="object-fit: scale-down;">
+          <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">
+              <!----></i></div>
+        </div>
+        <div class="text">scale-down</div>
+      </div>
+    </div>
+  </div>
   <div>
     <div class="van-row" style="margin-left: -10px; margin-right: -10px;">
       <div class="van-col van-col--8" style="padding-left: 10px; padding-right: 10px;">