feat: 修改图片预览组件特性，在【我的素材】【图片】页引入此组件

src/views/material/image/index.vue

@@ -79,6 +79,7 @@
               :id="'img' + item.id"
               :src="data + `?${Math.random()}`"
               alt=""
+              @click="previewImage(item)"
             />
           </div>
           <span
@@ -107,7 +108,14 @@
       @rename="handleRename"
       @close="showRename = false"
     />
-    <preview/>
+    <preview
+      ref="image-previewer"
+      :ifShow="showPreview"
+      :canFullScreen="false"
+      :imageList="list.map(item => item.icon)"
+      :imageTitleList="list.map(item => item.fileName)"
+      @click-delete="onClickDeleteInPreview"
+    />
   </div>
 </template>
 
@@ -195,10 +203,6 @@ export default {
       this.hasMoreData = true
       this.$refs['table-list'].requestMoreData()
     }, 700, false),
-    viewImg(id) {
-      const viewer = this.$el.querySelector("#" + id).$viewer;
-      viewer.show();
-    },
     handleRename(newName) {
       editMaterial(
         {
@@ -266,6 +270,12 @@ export default {
         },
       });
     },
+    previewImage(targetItem) {
+      const index = this.list.findIndex((eachItem) => {
+        return eachItem.id === targetItem.id
+      })
+      this.$refs['image-previewer'].show(index)
+    },
     onFileChange(e) {
       e.files.forEach((eachFile, i) => {
         if (
@@ -370,6 +380,9 @@ export default {
         }
       );
     },
+    onClickDeleteInPreview(index) {
+      this.del(this.list[index])
+    },
   },
 };
 </script>

src/views/material/popup/preview1.1.0.vue

@@ -21,12 +21,12 @@
             <div class="remark">下一张</div>
           </div>
         </i>
-        <i class="iconfont icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
+        <i v-if="canScale" class="iconfont icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
           <div>
             <div class="remark">放大</div>
           </div>
         </i>
-        <i class="iconfont icon-material_preview_narrow hover-tips" @click="onClickZoomOut()">
+        <i v-if="canScale" class="iconfont icon-material_preview_narrow hover-tips" @click="onClickZoomOut()">
           <div>
             <div class="remark">缩小</div>
           </div>
@@ -36,12 +36,12 @@
             <div class="remark">删除</div>
           </div>
         </i>
-        <i v-if="objectFit === 'scale-down'" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
+        <i v-if="canFullScreen && objectFit === 'scale-down'" class="iconfont icon-material_preview_full_screen hover-tips" @click="onClickFullScreen()">
           <div>
             <div class="remark">全屏</div>
           </div>
         </i>
-        <i v-if="objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
+        <i v-if="canFullScreen && objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
           <div>
             <div class="remark">取消全屏</div>
           </div>
@@ -56,10 +56,6 @@ import Popup from "@/components/shared/popup";
 
 export default {
   props: {
-    ifShow: {
-      type: Boolean,
-      default: true
-    },
     imageTitleList: {
       type: Array,
       default: () => {
@@ -92,6 +88,7 @@ export default {
   },
   data(){
     return {
+      ifShow: false,
       currentIndex: 0,
       scaleRate: 1,
       objectFit: 'scale-down',
@@ -115,6 +112,10 @@ export default {
     }
   },
   methods:{
+    show(index) {
+      Number.isSafeInteger(index) && (this.currentIndex = index)
+      this.ifShow = true
+    },
     onImageWheel(e) {
       if (e.deltaY > 0) {
         this.scaleRate = this.scaleRate * 1.1
@@ -138,8 +139,8 @@ export default {
     onClickZoomOut() {
       this.scaleRate *= 0.9
     },
-    onClickDelete(item) {
-      this.$emit('click-delete', item)
+    onClickDelete() {
+      this.$emit('click-delete', this.currentIndex)
     },
     onClickFullScreen() {
       this.scaleRate = 1
@@ -150,7 +151,7 @@ export default {
       this.objectFit = 'scale-down'
     },
     onClickClose() {
-      this.$emit('click-close')
+      this.ifShow = false
     }
   }
 }