From 3bd940cbc404e8d2fb5d573ff5fa9e887838dfd7 Mon Sep 17 00:00:00 2001 From: Haoran Yu Date: Thu, 9 May 2019 11:34:02 +0800 Subject: [PATCH] Docs: fix Image attribute type and default value (#15423) --- .editorconfig | 5 +++++ examples/demo-styles/image.scss | 12 +++++++++++ examples/docs/en-US/image.md | 35 ++++++++++++++++++++++++++++++++- examples/docs/es/image.md | 35 ++++++++++++++++++++++++++++++++- examples/docs/fr-FR/image.md | 35 ++++++++++++++++++++++++++++++++- examples/docs/zh-CN/image.md | 34 +++++++++++++++++++++++++++++++- packages/image/src/main.vue | 21 +++++++++++++++++--- 7 files changed, 170 insertions(+), 7 deletions(-) create mode 100644 .editorconfig diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..396edb0cd1e --- /dev/null +++ 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 index 9bf49967dce..b8134ba8f75 100644 --- 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 index 0e621d0bde4..ed6d1f5062d 100644 --- 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 +
+ + + + + +
+ + +``` +::: + ### 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 index 94b3ae40305..e6ab7e7ef92 100644 --- 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 +
+ + + + + +
+ + +``` +::: + ### 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 index bf298e5878c..cb23bcf9fd3 100644 --- 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 +
+ + + + + +
+ + +``` +::: + ### 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 index 055df56bdf2..9bf12f69df7 100644 --- 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 +
+ + + + + +
+ + +``` +::: + ### 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 index 4cbccf0dc2d..571f8b3ac8a 100644 --- 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;