From 250babecaa6c2fc38c1609fc0b36f947ede4e61d Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Thu, 18 Jul 2019 21:01:14 +0800
Subject: [PATCH] [new feature] Image: add loading-placeholder prop (#3893)

---
 src/image/README.md                             |  5 ++++-
 src/image/README.zh-CN.md                       |  5 +++--
 src/image/index.js                              | 12 ++++++++----
 src/image/test/__snapshots__/index.spec.js.snap |  2 ++
 src/image/test/index.spec.js                    | 10 ++++++++++
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/image/README.md b/src/image/README.md
index 6ffb8cee8..67ccd0444 100644
--- a/src/image/README.md
+++ b/src/image/README.md
@@ -33,6 +33,8 @@ Vue.use(Image);
 
 ### Round
 
+Show round image, it may not works at `fit=contain` and `fit=scale-down`
+
 ```html
 <van-image
   round
@@ -67,11 +69,12 @@ 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` | - | - |
+| round | Whether to be round | `boolean` | `false` | - |
 | lazy-load | Whether to enable lazy load，should register [Lazyload](#/en-US/lazyload) component | `boolean` | `false` | - |
+| loading-placeholder | Whether to show loading placeholder | `boolean` | `true` |
 
 ### fit optional value
 
diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md
index e6894c31e..e90a569c9 100644
--- a/src/image/README.zh-CN.md
+++ b/src/image/README.zh-CN.md
@@ -41,7 +41,7 @@ Vue.use(Image);
 
 ### 圆形图片
 
-通过`round`属性可以设置图片变圆
+通过`round`属性可以设置图片变圆，注意当图片宽高不相等且`fit`为`contain`或`scale-down`时，将无法填充一个完整的圆形。
 
 ```html
 <van-image
@@ -95,11 +95,12 @@ Vue.use(Image);
 |------|------|------|------|------|
 | src | 图片链接 | `string` | - | - |
 | fit | 图片填充模式 | `string` | `fill` | - |
-| round | 圆形图片，当图片宽高不相等时 `fit=contain` 和 `fit=scale-down` 可能无法实现「圆形」图片 | `boolean` | `false` | - |
 | alt | 替代文本 | `string` | - | - |
 | width | 宽度，默认单位为 px | `string | number` | - | - |
 | height | 高度，默认单位为 px | `string | number` | - | - |
+| round | 是否显示为圆形 | `boolean` | `false` | - |
 | lazy-load | 是否开启图片懒加载，须配合 [Lazyload](#/zh-CN/lazyload) 组件使用 | `boolean` | `false` | - |
+| loading-placeholder | 是否展示图片加载中提示 | `boolean` | `true` | `2.0.9` |
 
 ### 图片填充模式
 
diff --git a/src/image/index.js b/src/image/index.js
index 995252b69..72cb02b72 100644
--- a/src/image/index.js
+++ b/src/image/index.js
@@ -5,13 +5,17 @@ const [createComponent, bem] = createNamespace('image');
 
 export default createComponent({
   props: {
-    round: Boolean,
     src: String,
     fit: String,
     alt: String,
-    lazyLoad: Boolean,
+    round: Boolean,
     width: [Number, String],
-    height: [Number, String]
+    height: [Number, String],
+    lazyLoad: Boolean,
+    loadingPlaceholder: {
+      type: Boolean,
+      default: true
+    }
   },
 
   data() {
@@ -91,7 +95,7 @@ export default createComponent({
     },
 
     renderPlaceholder() {
-      if (this.loading) {
+      if (this.loading && this.loadingPlaceholder) {
         return (
           <div class={bem('loading')}>
             {this.slots('loading') || <Icon name="photo-o" size="22" />}
diff --git a/src/image/test/__snapshots__/index.spec.js.snap b/src/image/test/__snapshots__/index.spec.js.snap
index cfa3f8b71..418dab8bb 100644
--- a/src/image/test/__snapshots__/index.spec.js.snap
+++ b/src/image/test/__snapshots__/index.spec.js.snap
@@ -24,3 +24,5 @@ exports[`load event 2`] = `
       <!----></i></div>
 </div>
 `;
+
+exports[`loading-placeholder prop 1`] = `<div class="van-image"><img class="van-image__img"></div>`;
diff --git a/src/image/test/index.spec.js b/src/image/test/index.spec.js
index f3a493fc8..4f3042429 100644
--- a/src/image/test/index.spec.js
+++ b/src/image/test/index.spec.js
@@ -101,3 +101,13 @@ test('lazy-load error event', done => {
     }
   });
 });
+
+test('loading-placeholder prop', () => {
+  const wrapper = mount(Image, {
+    propsData: {
+      loadingPlaceholder: false
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});