feat: remove preview component using el-image instead (#435)

Author: vanoneang

.env.development

@@ -1,3 +1,3 @@
 ENV = 'development'
 
-VUE_APP_BASE_URL = 'http://face.api.talelin.com/'
+VUE_APP_BASE_URL = 'http://localhost:5000/'

src/assets/style/realize/element-variable.scss

@@ -423,11 +423,11 @@ thead tr {
   overflow-y: auto;
 }
 
-.el-menu--vertical ::v-deep .icon-erjizhibiao {
+.el-menu--vertical :v-deep(.icon-erjizhibiao) {
   display: none;
 }
 
-.el-menu--vertical ::v-deep .two-folder {
+.el-menu--vertical :v-deep(.two-folder) {
   margin-left: 40px;
 }
 

src/component/base/preview/preview.vue

@@ -43,7 +43,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-.lin-search ::v-deep .el-input__inner {
+.lin-search :v-deep(.el-input__inner) {
   width: 150px;
   border-radius: 20px;
   transition: all 0.2s linear;
@@ -53,7 +53,7 @@ export default {
     transition: all 0.3s linear;
   }
 }
-.lin-search ::v-deep .el-input__suffix {
+.lin-search :v-deep(.el-input__suffix) {
   cursor: pointer;
 }
 </style>

src/component/base/search/lin-search.vue

@@ -11,7 +11,15 @@ todo: 文件判断使用 serveWorker 优化性能
     <template v-for="(item, i) in itemList">
       <template v-if="item.display">
         <div class="thumb-item" :key="item.id" :style="boxStyle" v-loading="item.loading">
-          <el-image class="thumb-item-img" :src="item.display" :fit="fit" style="width: 100%; height: 100%;"></el-image>
+          <el-image
+            :fit="fit"
+            :ref="setImageRef"
+            :src="item.display"
+            class="thumb-item-img"
+            :previewSrcList="srcList"
+            style="width: 100%; height: 100%;"
+          >
+          </el-image>
           <div class="info">
             <i
               v-if="item.file"
@@ -73,6 +81,7 @@ todo: 文件判断使用 serveWorker 优化性能
       :multiple="multiple"
       :accept="accept"
     />
+    <!-- <el-image-viewer v-if="showViewer" @close="closeViewer" :initial-index="imageInitialIndex" :url-list="srcList" /> -->
   </div>
 </template>
 
@@ -221,10 +230,12 @@ export default {
   name: 'UploadImgs',
   data() {
     return {
+      srcList: [],
       itemList: [],
+      imageRefs: [],
       loading: false,
       currentId: '', // 正在操作项的id
-      globalImgPriview: '$imagePreview', // 全局图片预览方法名
+      imageInitialIndex: 0,
     }
   },
   props: {
@@ -714,23 +725,13 @@ export default {
      * @param {Number} index 索引序号
      */
     previewImg(data, index) {
-      // 如果有全局预览方法
-      if (this[this.globalImgPriview]) {
-        const images = []
-        this.itemList.forEach(element => {
-          if (element.display) {
-            images.push(element.display)
-          }
-        })
-        this[this.globalImgPriview]({
-          images,
-          index,
-        })
-      } else {
-        // element 原生粗糙模式
-        this.$confirm(`<img src="${data.display}" style="width: 100%;" />`, '预览', {
-          dangerouslyUseHTMLString: true,
-        })
+      const usable = this.itemList.filter(item => item.status !== 'input')
+      this.srcList = usable.map(item => item.display)
+      this.imageRefs[index].showViewer = true
+    },
+    setImageRef(el) {
+      if (el) {
+        this.imageRefs.push(el)
       }
     },
     /**
@@ -1079,6 +1080,12 @@ export default {
   }
 
   .thumb-item {
+    :v-deep(.el-image-viewer__canvas) {
+      position: absolute;
+      max-width: 800px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
     .info {
       display: flex;
       align-items: center;

src/component/base/upload-image/index.vue

@@ -392,12 +392,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.user-dialog ::v-deep .el-dialog .el-dialog__header {
+.user-dialog :v-deep(.el-dialog .el-dialog__header) {
   border-bottom: 1px solid #dae1ed;
   padding-bottom: 20px;
 }
 
-.user-dialog ::v-deep .el-dialog .el-dialog__body {
+.user-dialog :v-deep(.el-dialog .el-dialog__body) {
   padding-bottom: 00px;
 }