fix:项目初始化

src/components/ShowImg/index.vue

@@ -0,0 +1,165 @@
+<!--
+ * @Author: 王涛
+ * @Mail: no
+ * @Date: 2020-10-05 11:36:16
+ * @LastEditors: 江涛
+ * @LastEditTime: 2021-03-03 17:50:26
+-->
+
+<template>
+  <div class="img-wrap">
+    <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"  style="width: 100%, height: 100%" @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>
+    </div>
+    <div v-if='showChangeBtn' class="changeRight" @click="changeRight">
+      <i class="el-icon-arrow-right"></i>
+    </div>
+    <!--封面图、视频弹窗组件-->
+    <Dialog ref="dialog"></Dialog>
+  </div>
+</template>
+<script>
+import Dialog from './components/dialog'
+export default {
+  data() {
+    return {
+      showNoImg: false,
+      src: undefined,
+      showChangeBtn: false,
+      domain: this.$store.getters.getSystemConfig.webImgReq, // 存放图片的域名
+      imgsUrl: []
+    }
+  },
+  components: {
+    Dialog
+  },
+  props: ['width', 'height', 'urls'],
+  watch: {
+    urls(newval, oldval) {
+      this.urls = newval
+      // if (this.type && this.type === 'daichong') {
+      //   this.domain = ''
+      // }
+      this.imgsUrl = []
+      if (this.urls) { // 判断是否存在
+        if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
+          this.src = 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(item => {
+              this.imgsUrl.push(this.domain + item)
+            })
+            this.src = this.imgsUrl[0]
+            this.showNoImg = false
+          } else {
+            this.showNoImg = true
+          }
+        }
+      } else {
+        this.showChangeBtn = false
+        this.showNoImg = true
+      }
+    }
+  },
+  mounted() {
+    this.imgsUrl = []
+    if (this.urls) { // 判断是否存在
+      if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
+        this.src = this.domain + this.urls
+      } else {
+        if (this.urls.length) { // 判断是否为空数组
+          if (this.urls.length === 1) { // 判断数组中是否只有一张图片
+            this.showChangeBtn = false
+          } else {
+            this.showChangeBtn = true
+          }
+          this.urls.forEach(item => {
+            this.imgsUrl.push(this.domain + item)
+          })
+          this.src = this.imgsUrl[0]
+        } else {
+          this.showNoImg = true
+        }
+      }
+    } else {
+      this.showChangeBtn = false
+      this.showNoImg = true
+    }
+  },
+  methods: {
+    changeLeft() {
+      const index = this.imgsUrl.indexOf(this.src)
+      if (index === 0) {
+        this.src = this.imgsUrl[this.imgsUrl.length - 1]
+      } else {
+        this.src = this.imgsUrl[index - 1]
+      }
+    },
+    changeRight() {
+      const index = this.imgsUrl.indexOf(this.src)
+      if (index === this.imgsUrl.length - 1) {
+        this.src = this.imgsUrl[0]
+      } else {
+        this.src = this.imgsUrl[index + 1]
+      }
+    },
+    // 查看媒体
+    checkMedia() {
+      if (this.urls) { // 判断是否存在
+        if (typeof (this.urls) === 'string') { // 判断是单张图片还是数组
+          this.$refs.dialog.open(this.domain + this.urls, 'img')
+        } else {
+          this.$refs.dialog.open(this.urls, 'img')
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+.img-wrap {
+  display: flex;
+  justify-content: center;
+  cursor: pointer;
+
+  .changeLeft,
+  .changeRight {
+    width: 15px;
+    height: 15px;
+    line-height: 15px;
+    margin-top: 15%;
+    cursor: pointer;
+  }
+  .showImg {
+    width: 100%;
+    height:100%;
+    .image-slot {
+      background: #f5f7fa;
+      font-size: 12px;
+      color: #c0c4cc;
+    }
+    .el-image__error {
+      font-size: 12px;
+    }
+    .el-image{
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>