feat: Image add infinite props

examples/docs/en-US/image.md

@@ -148,6 +148,7 @@ Besides the native features of img, support lazy load, custom placeholder and lo
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | whether the viewer preview is infinite. | boolean | — | true |
 
 ### Events
 | Event Name | Description | Parameters |

examples/docs/es/image.md

@@ -150,6 +150,7 @@ Además de las características nativas de img, soporte de carga perezosa, marca
 | preview-src-list | permitir una vista previa grande de la imagen | Array | — | - |
 | z-index | establecer el z-index de la vista previa de la imagen | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | Si la vista previa del espectador es ilimitada. | boolean | — | true |
 
 ### Eventos
 | Nombre del evento | Descripción | Parámetros |

examples/docs/fr-FR/image.md

@@ -149,6 +149,7 @@ En plus des propriétés natives de img, ce composant supporte le lazy loading,
 | preview-src-list | allow big image preview | Array | — | - |
 | z-index | set image preview z-index | Number | — | 2000 |
 | initial-index | set image preview array index | Number | — | - |
+| infinite | Voir si l'aperçu du spectateur est illimité. | boolean | — | true |
 
 ### Évènements
 | Nom | Description | Paramètres |

examples/docs/zh-CN/image.md

@@ -148,6 +148,7 @@
 | preview-src-list | 开启图片预览功能 | Array | — | - |
 | z-index | 设置图片预览的 z-index | Number | — | 2000 |
 | initial-index | 图片预览初始图片index | Number | — | - |
+| infinite | 是否可以无限循环预览 | boolean | — | true |
 
 ### Events
 | 事件名称      | 说明    | 回调参数      |

packages/image/src/image-viewer.vue

@@ -35,8 +35,8 @@
       </div>
       <!-- CANVAS -->
       <div class="el-image-viewer__canvas">
+        <template v-for="(url, i) in urlList">
           <img
-          v-for="(url, i) in urlList"
             v-if="i === index"
             ref="img"
             class="el-image-viewer__img"
@@ -45,7 +45,8 @@
             :style="imgStyle"
             @load="handleImgLoad"
             @error="handleImgError"
-          @mousedown="handleMouseDown">
+            @mousedown="handleMouseDown" />
+        </template>
       </div>
     </div>
   </transition>
@@ -100,6 +101,10 @@ export default {
     maskClosable: {
       type: Boolean,
       default: true
+    },
+    infinite: {
+      type: Boolean,
+      default: true
     }
   },
 
@@ -107,7 +112,6 @@ export default {
     return {
       index: this.initialIndex,
       isShow: false,
-      infinite: true,
       loading: false,
       mode: Mode.CONTAIN,
       transform: {

packages/image/src/main.vue

@@ -16,7 +16,7 @@
       :style="imageStyle"
       :class="{ 'el-image__inner--center': alignCenter, 'el-image__preview': preview }">
     <template v-if="preview">
-      <image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
+      <image-viewer :z-index="zIndex" v-bind="$attrs" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList"/>
     </template>
   </div>
 </template>

packages/theme-chalk/src/image.scss

@@ -122,6 +122,10 @@
     background-color: #606266;
     border-color: #fff;
     left: 40px;
+    @include when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 
   @include e(next){
@@ -135,6 +139,10 @@
     border-color: #fff;
     right: 40px;
     text-indent: 2px;
+    @include when(disabled) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
   }
 
   @include e(mask) {

types/image.d.ts

@@ -24,6 +24,9 @@ export declare class ElImage extends ElementUIComponent {
   /** Whether to use lazy load */
   lazy: boolean
 
+  /** Whether to use infinite */
+  infinite: boolean
+
   /** Scroll container that to add scroll listener when using lazy load */
   scrollContainer: string | HTMLElement