Docs: fix Image attribute type and default value (ElemeFE#15423)

violetice · May 11, 2019 · 3bd940c · 3bd940c
1 parent 6da0498
commit 3bd940c
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 7 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,5 @@
+[*]
+indent_style = space
+
+[{*.vue,*.js,*.json,*.yml,*.md}]
+indent_size = 2
diff --git a/examples/demo-styles/image.scss b/examples/demo-styles/image.scss
@@ -76,3 +76,15 @@
     }
   }
 }
+
+.demo-image__carousel_lazy {
+  .el-carousel{
+    height: 400px;
+  }
+  .el-carousel__container {
+    height: 100%;
+  }
+  .el-image {
+    height: 100%;
+  }
+}
diff --git a/examples/docs/en-US/image.md b/examples/docs/en-US/image.md
@@ -108,11 +108,44 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 ```
 :::
 
+### Carousel Image Lazy
+
+:::demo No translation zh_CN：在`el-carousel-item`中的`el-image`可通过`lazy`开启懒加载功能，当`el-carousel-item`的`active`为`true`时，才会加载图片。
+
+```html
+<div class="demo-image__carousel_lazy">
+  <el-carousel trigger="click">
+    <el-carousel-item v-for="(url, key) in list" :key="key">
+      <el-image :src="url" lazy></el-image>
+    </el-carousel-item>
+  </el-carousel>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | Attribute | Description | Type  | Accepted values | Default   |
 |---------- |-------- |---------- |-------------  |-------- |
 | src | Image source, same as native | string | — | - |
-| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
+| fit | Indicate how the image should be resized to fit its container, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | Native alt | string | - | - |
 | lazy | Whether to use lazy load | boolean | — | false |
 | scroll-container | The container to add scroll listener when using lazy load | string / HTMLElement | — | The nearest parent container whose overflow property is auto or scroll |

diff --git a/examples/docs/es/image.md b/examples/docs/es/image.md
@@ -110,11 +110,44 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 ```
 :::
 
+### Carousel Image Lazy
+
+:::demo No translation zh_CN：在`el-carousel-item`中的`el-image`可通过`lazy`开启懒加载功能，当`el-carousel-item`的`active`为`true`时，才会加载图片。
+
+```html
+<div class="demo-image__carousel_lazy">
+  <el-carousel trigger="click">
+    <el-carousel-item v-for="(url, key) in list" :key="key">
+      <el-image :src="url" lazy></el-image>
+    </el-carousel-item>
+  </el-carousel>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Atributos
 | Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
 |---------- |-------- |---------- |-------------  |-------- |
 | src | origen de la imagen, igual que en nativo | string | — | - |
-| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
+| fit | Indica como la imagen debe adaptarse al contenendor, lo mismo que [object-fit](https://developer.mozilla.org/es/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | alt nativo | string | - | - |
 | lazy | si se usara lazy load | boolean | — | false |
 | scroll-container | El contenedor para añadir el scroll listener cuando se utiliza lazy load | string / HTMLElement | — | El contenedor padre más cercano cuya propiedad de desbordamiento es auto o scroll |

diff --git a/examples/docs/fr-FR/image.md b/examples/docs/fr-FR/image.md
@@ -109,11 +109,44 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 ```
 :::
 
+### Carousel Image Lazy
+
+:::demo No translation zh_CN：在`el-carousel-item`中的`el-image`可通过`lazy`开启懒加载功能，当`el-carousel-item`的`active`为`true`时，才会加载图片。
+
+```html
+<div class="demo-image__carousel_lazy">
+  <el-carousel trigger="click">
+    <el-carousel-item v-for="(url, key) in list" :key="key">
+      <el-image :src="url" lazy></el-image>
+    </el-carousel-item>
+  </el-carousel>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributs
 | Attribut | Description | Type  | Valeurs acceptées | Défaut   |
 |---------- |-------- |---------- |-------------  |-------- |
 | src | Source de l'image, identique au natif. | string | — | - |
-| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
+| fit | Indique comment l'image devrait être redimmensionnée pour s'adapter à son conteneur, identique à [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | Attribut alt natif.| string | - | - |
 | lazy | Si le lazy loading doit être utilisé. | boolean | — | false |
 | scroll-container | Le conteneur auquel ajouter le listener du scroll en mode lazy loading. | string / HTMLElement | — | Le conteneur parent le plus proche avec la propriété overflow à auto ou scroll. |

diff --git a/examples/docs/zh-CN/image.md b/examples/docs/zh-CN/image.md
@@ -108,11 +108,43 @@
 ```
 :::
 
+### 走马灯懒加载
+
+:::demo 在`el-carousel-item`中的`el-image`可通过`lazy`开启懒加载功能，当`el-carousel-item`的`active`为`true`时，才会加载图片。
+```html
+<div class="demo-image__carousel_lazy">
+  <el-carousel trigger="click">
+    <el-carousel-item v-for="(url, key) in list" :key="key">
+      <el-image :src="url" lazy></el-image>
+    </el-carousel-item>
+  </el-carousel>
+</div>
+
+<script>
+  export default {
+    data() {
+      return {
+        list: [
+          'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+          'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+          'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+          'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+          'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+          'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
+        ]
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
 | src | 图片源，同原生 | string | — | - |
-| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | fill / contain / cover / none / scale-down | — | - |
+| fit | 确定图片如何适应容器框，同原生 [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) | string | fill / contain / cover / none / scale-down | - |
 | alt | 原生 alt | string | - | - |
 | lazy | 是否开启懒加载 | boolean | — | false |
 | scroll-container | 开启懒加载后，监听 scroll 事件的容器 | string / HTMLElement | — | 最近一个 overflow 值为 auto 或 scroll 的父元素 |

diff --git a/packages/image/src/main.vue b/packages/image/src/main.vue
@@ -50,6 +50,7 @@
         loading: true,
         error: false,
         show: !this.lazy,
+        inCarousel: null,
         imageWidth: 0,
         imageHeight: 0
       };
@@ -80,15 +81,20 @@
     },
 
     mounted() {
-      if (this.lazy) {
-        this.addLazyLoadListener();
+      const parent = this.$parent;
+      const inCarousel = parent.$el.className.indexOf('el-carousel__item') !== -1;
+
+      if (inCarousel) {
+        this.removeLazyLoadListener();
+        this.lazy ? this.addLazyLoadInCarousel(parent) : this.loadImage();
       } else {
-        this.loadImage();
+        this.lazy ? this.addLazyLoadListener() : this.loadImage();
       }
     },
 
     beforeDestroy() {
       this.lazy && this.removeLazyLoadListener();
+      this.removeLazyLoadInCarousel();
     },
 
     methods: {
@@ -121,6 +127,15 @@
           this.removeLazyLoadListener();
         }
       },
+      addLazyLoadInCarousel(parent) {
+        this.inCarousel = this.$watch(() => parent.active, function(active) {
+          active && (this.show = true);
+          this.removeLazyLoadInCarousel();
+        });
+      },
+      removeLazyLoadInCarousel() {
+        typeof this.inCarousel === 'function' && this.inCarousel.call();
+      },
       addLazyLoadListener() {
         if (this.$isServer) return;