feat: Image add infinite props

ElemeFE · Sep 4, 2024 · 00ed0b5 · 00ed0b5
1 parent c345bb4
commit 00ed0b5
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 13 deletions.
diff --git a/examples/docs/en-US/image.md b/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 |

diff --git a/examples/docs/es/image.md b/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 |

diff --git a/examples/docs/fr-FR/image.md b/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 |

diff --git a/examples/docs/zh-CN/image.md b/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
 | 事件名称      | 说明    | 回调参数      |

diff --git a/packages/image/src/image-viewer.vue b/packages/image/src/image-viewer.vue
@@ -35,17 +35,18 @@
       </div>
       <!-- CANVAS -->
       <div class="el-image-viewer__canvas">
-        <img
-          v-for="(url, i) in urlList"
-          v-if="i === index"
-          ref="img"
-          class="el-image-viewer__img"
-          :key="url"
-          :src="currentImg"
-          :style="imgStyle"
-          @load="handleImgLoad"
-          @error="handleImgError"
-          @mousedown="handleMouseDown">
+        <template v-for="(url, i) in urlList">
+          <img
+            v-if="i === index"
+            ref="img"
+            class="el-image-viewer__img"
+            :key="url"
+            :src="currentImg"
+            :style="imgStyle"
+            @load="handleImgLoad"
+            @error="handleImgError"
+            @mousedown="handleMouseDown" />
+        </template>
       </div>
     </div>
   </transition>
@@ -100,14 +101,17 @@ export default {
     maskClosable: {
       type: Boolean,
       default: true
+    },
+    infinite: {
+      type: Boolean,
+      default: true
     }
   },
 
   data() {
     return {
       index: this.initialIndex,
       isShow: false,
-      infinite: true,
       loading: false,
       mode: Mode.CONTAIN,
       transform: {

diff --git a/packages/image/src/main.vue b/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>

diff --git a/packages/theme-chalk/src/image.scss b/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) {

diff --git a/types/image.d.ts b/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