refactor: 图片预览组件文件改名

src/views/material/popup/panoImagePreviewer.vue

@@ -0,0 +1,234 @@
+<template>
+  <popup v-if="ifShow">
+    <div class="preview-wrapper">
+      <div class="title">{{imageTitleList[currentIndex]}}</div>
+      <img class="close-btn" :src="require('@/assets/images/icons/material_preview_close@2x.png')" @click=onClickClose />
+      <img
+        class="image"
+        :src="imageList[currentIndex]"
+        :style="imageStyle"
+        @wheel.prevent="onImageWheel"
+      />
+      <div class="toolbar">
+        <i
+          class="iconfont icon-material_preview_previous hover-tips" @click="onClickPrevious()">
+          <div>
+            <div class="remark">上一张</div>
+          </div>
+        </i>
+        <i class="iconfont icon-material_preview_next1 hover-tips append-splitter" @click="onClickNext()">
+          <div>
+            <div class="remark">下一张</div>
+          </div>
+        </i>
+        <i v-if="canScale" class="iconfont icon-material_preview_enlarge hover-tips" @click="onClickZoomIn()">
+          <div>
+            <div class="remark">放大</div>
+          </div>
+        </i>
+        <i v-if="canScale" class="iconfont icon-material_preview_narrow hover-tips" @click="onClickZoomOut()">
+          <div>
+            <div class="remark">缩小</div>
+          </div>
+        </i>
+        <i class="iconfont icon-material_preview_next hover-tips-warn" @click="onClickDelete()">
+          <div>
+            <div class="remark">删除</div>
+          </div>
+        </i>
+        <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="canFullScreen && objectFit === 'contain'" class="iconfont icon-material_preview_drop_out hover-tips" @click="onClickCancelFullScreen()">
+          <div>
+            <div class="remark">取消全屏</div>
+          </div>
+        </i>
+      </div>
+    </div>
+  </popup>
+</template>
+
+<script>
+import Popup from "@/components/shared/popup";
+
+export default {
+  props: {
+    imageTitleList: {
+      type: Array,
+      default: () => {
+        return [
+          'aaa',
+          'bbb'
+        ]
+      }
+    },
+    imageList: {
+      type: Array,
+      default: () => {
+        return [
+          'https://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fodder/20220125_114634855.jpg',
+          'https://oss-xiaoan.oss-cn-shenzhen.aliyuncs.com/720yun_fd_manage/fodder/20220125_142545584.jpg',
+        ]
+      }
+    },
+    canScale: {
+      type: Boolean,
+      default: true
+    },
+    canFullScreen: {
+      type: Boolean,
+      default: true
+    },
+  },
+  components:{
+    Popup
+  },
+  data(){
+    return {
+      ifShow: false,
+      currentIndex: 0,
+      scaleRate: 1,
+      objectFit: 'scale-down',
+    }
+  },
+  computed: {
+    imageStyle() {
+      return {
+        transform: `scale(${this.scaleRate})`,
+        objectFit: this.objectFit,
+      }
+    }
+  },
+  watch: {
+    imageList: {
+      handler: function (newList) {
+        if (newList.length - 1 < this.currentIndex) {
+          this.currentIndex = newList.length - 1
+        }
+      }
+    }
+  },
+  methods:{
+    show(index) {
+      Number.isSafeInteger(index) && (this.currentIndex = index)
+      this.ifShow = true
+    },
+    onImageWheel(e) {
+      if (e.deltaY > 0) {
+        this.scaleRate = this.scaleRate * 1.1
+      } else {
+        this.scaleRate = this.scaleRate * 0.9
+      }
+    },
+    onClickPrevious() {
+      if (this.currentIndex > 0) {
+        this.currentIndex--
+      }
+    },
+    onClickNext() {
+      if (this.currentIndex < this.imageList.length - 1) {
+        this.currentIndex++
+      }
+    },
+    onClickZoomIn() {
+      this.scaleRate = this.scaleRate * 1.1
+    },
+    onClickZoomOut() {
+      this.scaleRate *= 0.9
+    },
+    onClickDelete() {
+      this.$emit('click-delete', this.currentIndex)
+    },
+    onClickFullScreen() {
+      this.scaleRate = 1
+      this.objectFit = 'contain'
+    },
+    onClickCancelFullScreen() {
+      this.scaleRate = 1
+      this.objectFit = 'scale-down'
+    },
+    onClickClose() {
+      this.ifShow = false
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .preview-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    .title {
+      position: absolute;
+      top: 16px;
+      left: 30px;
+      z-index: 2;
+      height: 36px;
+      font-size: 14px;
+      color: #FFFFFF;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 18px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding-left: 16px;
+      padding-right: 16px;
+    }
+    .close-btn {
+      position: absolute;
+      top: 16px;
+      right: 30px;
+      width: 36px;
+      height: 36px;
+      z-index: 2;
+      cursor: pointer;
+    }
+    .toolbar {
+      position: absolute;
+      bottom: 147px;
+      left: 50%;
+      transform: translateX(-50%);
+      height: 60px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: 0 43px;
+      background: rgba(0, 0, 0, 0.6);
+      border-radius: 8px;
+      z-index: 2;
+      .iconfont {
+        cursor: pointer;
+        color: white;
+        margin-right: 36px;
+        font-size: 22px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .append-splitter {
+        &::after {
+          content: "|";
+          position: absolute;
+          right: -18px;
+          top: -4px;
+          font-size: 20px;
+          color: rgba(255, 255, 255, 0.5);
+        }
+      }
+    }
+    .image {
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      position: absolute;
+      z-index: 1;
+    }
+  }
+</style>