1

src/components/Adult/phonePreview/components/ImgPreview.vue

@@ -0,0 +1,131 @@
+<!--  -->
+<template>
+  <div class="img-preview-dialog">
+    <a class="img-preview-close" @click="closeImgPreview"
+      ><i class="el-icon-error"></i
+    ></a>
+    <div class="img-preview-inner">
+      <img
+        :src="imgPreviewSrc"
+        @load="handleImageLoad"
+        :style="{
+          marginTop: -imageHeight / 2 + 'px',
+          left: scale > 1 ? '0' : '50%',
+          marginLeft: scale > 1 ? '' : -imageWidth / 2 + 'px',
+          width: scale === 1 ? '' : imageWidth + 'px',
+          height: scale === 1 ? '' : imageHeight + 'px'
+        }"
+      />
+    </div>
+    <div class="img-preview-btn">
+      <i class="el-icon-zoom-out" @click="handleZoom('-')"></i>
+      <i class="el-icon-zoom-in" @click="handleZoom('+')"></i>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: ["imgPreviewSrc"],
+  components: {},
+  data() {
+    return {
+      scale: 1,
+      imageHeightOri: 0,
+      imageWidthOri: window.innerWidth, // 图片原宽度
+      imageHeight: 0,
+      imageWidth: window.innerWidth // 图片显示宽度
+    };
+  },
+  computed: {},
+  watch: {},
+  //方法集合
+  methods: {
+    handleZoom(type) {
+      if (type === "-") {
+        if (this.scale > 0.2) {
+          this.scale = (this.scale - 0.2).toFixed(2) * 1;
+        }
+      } else {
+        this.scale = (this.scale + 0.2).toFixed(2) * 1;
+      }
+      this.imageWidth = this.imageWidthOri * this.scale;
+      this.imageHeight = this.imageHeightOri * this.scale;
+    },
+    handleImageLoad(event) {
+      this.imageHeight = event.target.height; // 或者 img.naturalWidth，取决于需求
+      this.imageHeightOri = event.target.height; // 或者 img.naturalWidth，取决于需求
+    },
+    closeImgPreview() {
+      this.$emit("closeImgPreview");
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang="scss" scoped>
+//@import url(); 引入公共css类
+.img-preview-dialog {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+  .img-preview-close {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    width: 40px;
+    height: 40px;
+    font-size: 40px;
+    line-height: 1;
+    color: #fff;
+    background-color: #606266;
+    border-radius: 50%;
+    opacity: 0.8;
+    z-index: 1;
+  }
+  .img-preview-inner {
+    width: 100vw;
+    height: 100vh;
+    overflow: auto;
+    position: relative;
+    img {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: 100%;
+    }
+  }
+  .img-preview-btn {
+    position: absolute;
+    bottom: 30px;
+    left: 50%;
+    margin-left: -50px;
+    width: 100px;
+    height: 44px;
+    padding: 0 23px;
+    background-color: #606266;
+    border-color: #fff;
+    border-radius: 22px;
+    font-size: 23px;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    column-gap: 15px;
+  }
+}
+</style>