图片显示、预览组件优化

src/components/ShowImg/components/dialog.vue

@@ -9,7 +9,7 @@
     <el-dialog class="img_dialog" append-to-body :title="title" align="center" :visible.sync="dialogVisible" width="40%" :before-close="handleClose" :close-on-click-modal="false" :modal-append-to-body='false'>
         <el-carousel v-if="isArry" indicator-position="outside">
           <el-carousel-item v-for="item in mediaUrl" :key="item">
-            <div class="media-box" id="img-box" > <img :src="changeImg(item)" /></div>
+            <div class="media-box" id="img-box" > <img :src="item" /></div>
           </el-carousel-item>
         </el-carousel>
         <div v-else class="media-box" id="img-box" > <img :src="mediaUrl" /></div>
@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import { handleVerAutoImg } from '@/utils/index.js'
+
 export default {
   data() {
     return {
@@ -38,9 +38,6 @@ export default {
   mounted() {
   },
   methods: {
-    async changeImg(url) {
-      return await handleVerAutoImg(this.domain + url)
-    },
     handleClose() {
       if (this.player) {
         this.player.dispose()

src/components/ShowImg/index.vue

@@ -8,18 +8,16 @@
 
 <template>
   <div class="img-wrap">
-    <div v-if='showChangeBtn' class="changeLeft" @click="changeLeft">
+    <div v-if="showChangeBtn" class="changeLeft" @click="changeLeft">
       <i class="el-icon-arrow-left"></i>
     </div>
     <div class="showImg">
       <div v-if="showNoImg">暂无</div>
-      <el-image v-else :src="src"  @click="checkMedia()" lazy >
-        <div slot="placeholder" class="image-slot" :style="{width: width, height: height, lineHeight: height}">
-          <i class="el-icon-loading"></i>加载中
-        </div>
+      <el-image v-else :src="currentSrc" :preview-src-list="imgsUrl" lazy>
+        <div slot="placeholder" class="image-slot" :style="{ width: width, height: height, lineHeight: height }"><i class="el-icon-loading"></i>加载中</div>
       </el-image>
     </div>
-    <div v-if='showChangeBtn' class="changeRight" @click="changeRight">
+    <div v-if="showChangeBtn" class="changeRight" @click="changeRight">
       <i class="el-icon-arrow-right"></i>
     </div>
     <!--封面图、视频弹窗组件-->
@@ -39,63 +37,34 @@ export default {
       imgsUrl: []
     }
   },
+  computed: {
+    currentSrc() {
+      const src = this.src || this.imgsUrl[0]
+      return src
+    }
+  },
   components: {
     Dialog
   },
   props: ['width', 'height', 'urls'],
   watch: {
-    async urls(newval, oldval) {
-      this.urls = newval
-      this.imgsUrl = []
-      if (this.urls) { // 判断是否存在
-        if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-          this.src = await handleVerAutoImg(this.domain + this.urls)
-          this.showNoImg = false
-        } else {
-          if (this.urls.length) { // 判断是否为空数组
-            if (this.urls.length === 1) { // 判断数组中是否只有一张图片
-              this.showChangeBtn = false
-            } else {
-              this.showChangeBtn = true
-            }
-            this.urls.forEach(async item => {
-              this.imgsUrl.push(await handleVerAutoImg(this.domain + this.urls))
-            })
-            this.src = this.imgsUrl[0]
-            this.showNoImg = false
-          } else {
-            this.showNoImg = true
-          }
+    urls: {
+      async handler() {
+        this.imgsUrl = []
+        const urls = []
+        if (typeof this.urls === 'string') {
+          urls.push(this.urls)
+        } else if (Array.isArray(this.urls)) {
+          urls.push(...this.urls)
         }
-      } else {
-        this.showChangeBtn = false
-        this.showNoImg = true
-      }
-    }
-  },
-  async mounted() {
-    this.imgsUrl = []
-    if (this.urls) { // 判断是否存在
-      if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-        this.src = await handleVerAutoImg(this.domain + this.urls)
-      } else {
-        if (this.urls.length) { // 判断是否为空数组
-          if (this.urls.length === 1) { // 判断数组中是否只有一张图片
-            this.showChangeBtn = false
-          } else {
-            this.showChangeBtn = true
-          }
-          this.urls.forEach(async item => {
-            this.imgsUrl.push(await handleVerAutoImg(this.domain + item))
-          })
-          this.src = this.imgsUrl[0]
-        } else {
-          this.showNoImg = true
-        }
-      }
-    } else {
-      this.showChangeBtn = false
-      this.showNoImg = true
+        this.showChangeBtn = urls.length > 1
+        this.showNoImg = urls.length < 1
+        urls.forEach(async(item, i) => {
+          this.imgsUrl.push(await handleVerAutoImg(this.domain + item))
+          if (i < 1) this.src = this.imgsUrl[0]
+        })
+      },
+      immediate: true
     }
   },
   methods: {
@@ -116,14 +85,8 @@ export default {
       }
     },
     // 查看媒体
-    async  checkMedia() {
-      if (this.urls) { // 判断是否存在
-        if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
-          this.$refs.dialog.open(await handleVerAutoImg(this.domain + this.urls), 'img')
-        } else {
-          this.$refs.dialog.open(this.imgsUrl, 'img')
-        }
-      }
+    async checkMedia() {
+      this.$refs.dialog.open(this.imgsUrl, 'img')
     }
   }
 }
@@ -145,7 +108,7 @@ export default {
   }
   .showImg {
     width: 100%;
-    height:100%;
+    height: 100%;
     .image-slot {
       background: #f5f7fa;
       font-size: 12px;
@@ -154,7 +117,7 @@ export default {
     .el-image__error {
       font-size: 12px;
     }
-    .el-image{
+    .el-image {
       width: 100%;
       height: 100%;
     }