图片懒加载和预览

webM/src/views/tab4/tab4-2.vue

@@ -1,330 +1,41 @@
+<!--  -->
 <template>
-  <div class="tab4-2">
-    <div class="search" @keyup.enter="mySearch">
-      <el-input
-        placeholder="请输入关键词..."
-        suffix-icon="el-icon-search"
-        v-model="formData.searchKey"
-      >
-      </el-input>
-      <span class="btn" @click="mySearch"></span>
-    </div>
-    <!-- 内容 -->
-    <div class="conten" v-if="myArr.length !== 0">
-      <div class="row" v-for="(item, index) in myArr" :key="item.id">
-        <el-image
-          @click="lookBigImg(item, index)"
-          style="width: 351px; height: 200px"
-          :src="baseURL + item.thumb"
-          :preview-src-list="srcList"
-        >
-        </el-image>
-        <!-- <img src="../../assets/img/demo2.png" alt="" /> -->
-        <p :title="item.name">{{ item.name }}</p>
-      </div>
-    </div>
-    <div class="tab4-2 conNull" v-else>
-      <img src="@/assets/img/nullData.png" alt="">
-      <p>暂无查询数据</p>
-    </div>
-    <!-- 分页 -->
-    <div class="paging">
-      <el-pagination
-        layout="prev,pager,next,jumper"
-        :total="total"
-        :current-page="formData.pageNum"
-        @current-change="currentChange"
-        @size-change="sizeChange"
-      >
-      </el-pagination>
-    </div>
-    <!-- 大图预览里面的文字显示 -->
-    <div class="imgBigShow" v-if="imgBigShow">{{ imgBigTxt }}</div>
-  </div>
+<div class='tab4-2'></div>
 </template>
+
 <script>
-import axios from "@/utils/request";
-import { imgList, webVisit } from "@/utils/api";
 export default {
-  name: "tab4-2",
-  components: {},
-  data() {
-    // 这里存放数据
-    return {
-      tempNum: 0,
-      imgBigTxt: "",
-      imgBigShow: false,
-      myArr: [],
-      total: 0,
-      formData: {
-        pageNum: 1,
-        pageSize: 8,
-        searchKey: "",
-      },
-      baseURL: "",
-      srcList: [""],
-    };
-  },
-  // 监听属性 类似于data概念
-  computed: {},
-  // 监控data中的数据变化
-  watch: {},
-  // 方法集合
-  methods: {
-    //点击图片，查看大图
-    async lookBigImg(item, index) {
-      this.imgBigTxt = item.name;
-      this.tempNum = index;
-      this.$nextTick(() => {
-        setTimeout(() => {
-          this.imgBigShow = true;
-          //因为污染自己写滚轮缩放
-          document
-            .querySelector(".el-image-viewer__wrapper")
-            .addEventListener("mousewheel", (event) => {
-              let delta = 0;
-              if (!event) event = window.event;
-              if (event.wheelDelta) {
-                delta = event.wheelDelta / 120;
-                if (window.opera) delta = -delta;
-              } else if (event.detail) {
-                delta = -event.detail / 3;
-              }
-              let img = document.querySelector(".el-image-viewer__img");
-              if (delta > 0) {
-                let width = img.width;
-                img.width = width * 1.1;
-              } else if (delta < 0) {
-                let width = img.width;
-                if (width > 100) {
-                  img.width = width * 0.9;
-                }
-              }
-            });
-          const myTemp = document.querySelector(".el-image-viewer__mask");
-          myTemp.addEventListener("click", () => {
-            this.imgBigShow = false;
-          });
-          const temp = document.querySelector(".el-image-viewer__close");
-          temp.addEventListener("click", () => {
-            this.imgBigShow = false;
-            // console.log('我点了里面的关闭')
-          });
-          // 左按钮
-          const tempLeft = document.querySelector(".el-image-viewer__prev");
-          tempLeft.addEventListener("click", () => {
-            this.tempNum--;
-            if (this.tempNum < 0) this.tempNum = this.myArr.length - 1;
-            this.imgBigTxt = this.myArr[this.tempNum].name;
-          });
-          // 右按钮
-          const tempRight = document.querySelector(".el-image-viewer__next");
-          tempRight.addEventListener("click", () => {
-            this.tempNum++;
-            if (this.tempNum === this.myArr.length) this.tempNum = 0;
-            this.imgBigTxt = this.myArr[this.tempNum].name;
-          });
-        }, 100);
-      });
-      // 记录访问量
-      await webVisit("img", item.id);
-    },
-    // 分页器方法
-    currentChange(val) {
-      // console.log('当前页改变了', val)
-      this.formData.pageNum = val;
-      this.imgList(this.formData);
-    },
-    sizeChange(val) {
-      // console.log('条数改变了', val)
-      this.formData.pageNum = 1;
-      this.formData.pageSize = val;
-      this.imgList(this.formData);
-    },
-    mySearch() {
-      // console.log("点击了搜索");
-      this.formData.pageNum = 1;
-      this.imgList(this.formData);
-    },
-    // 封装获取列表函数
-    async imgList(data) {
-      const res = await imgList(data);
-      this.total = res.data.total;
-      this.myArr = res.data.records;
-      let temp = [];
-      res.data.records.forEach((v) => {
-        temp.push(this.baseURL + v.thumb);
-      });
-      this.srcList = temp;
-    },
-  },
-  // 生命周期 - 创建完成（可以访问当前this实例）
-  created() {
-    // 获取服务器前缀地址
-    this.baseURL = axios.defaults.baseURL;
-    this.imgList(this.formData);
-  },
-  // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted() {},
-  beforeCreate() {}, // 生命周期 - 创建之前
-  beforeMount() {}, // 生命周期 - 挂载之前
-  beforeUpdate() {}, // 生命周期 - 更新之前
-  updated() {}, // 生命周期 - 更新之后
-  beforeDestroy() {}, // 生命周期 - 销毁之前
-  destroyed() {}, // 生命周期 - 销毁完成
-  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
+name:'tab4',
+components: {},
+data() {
+return {
+
 };
-</script>
-<style lang='less' scoped>
-.conNull {
-  display: block !important;
-  height: 500px !important;
-  &>img{
-    margin: 100px auto 30px;
-    display: block;
-    width: 150px;
-    height: 150px;
-  }
-  &>p{
-    text-align: center;
-    font-size: 18px;
-    color: #AC1D29;
-  }
-}
-.tab4-2 {
-  position: relative;
-  /*修改提示文字的颜色*/
-  /deep/input::-webkit-input-placeholder {
-    /* WebKit browsers */
-    color: #b9412e;
-  }
-  /deep/input:-moz-placeholder {
-    /* Mozilla Firefox 4 to 18 */
-    color: #b9412e;
-  }
-  /deep/input::-moz-placeholder {
-    /* Mozilla Firefox 19+ */
-    color: #b9412e;
-  }
-  /deep/input:-ms-input-placeholder {
-    /* Internet Explorer 10+ */
-    color: #b9412e;
-  }
-  // position: relative;
-  padding: 30px 200px;
-  display: flex;
-  width: 100%;
-  height: 620px;
-  color: black;
+},
+computed: {},
+methods: {
 
-  .search {
-    z-index: 10;
-    /*修改提示文字的颜色*/
-    /deep/input::-webkit-input-placeholder {
-      /* WebKit browsers */
-      color: #be1220;
-    }
-    /deep/input:-moz-placeholder {
-      /* Mozilla Firefox 4 to 18 */
-      color: #be1220;
-    }
-    /deep/input::-moz-placeholder {
-      /* Mozilla Firefox 19+ */
-      color: #be1220;
-    }
-    /deep/input:-ms-input-placeholder {
-      /* Internet Explorer 10+ */
-      color: #be1220;
-    }
+},
+//生命周期 - 创建完成（可以访问当前this实例）
+created() {
 
-    width: 700px;
-    height: 50px;
-    position: absolute;
-    top: -25px;
-    left: 50%;
-    transform: translateX(-50%);
-    /deep/.el-input__suffix {
-      width: 50px;
-      height: 50px;
-      font-size: 20px;
-      right: 0;
-    }
-    /deep/.el-input__inner {
-      border-radius: 50px;
-      height: 50px;
-      border: 1px solid #be1220;
-    }
-    .btn {
-      cursor: pointer;
-      position: absolute;
-      right: 0;
-      top: 0;
-      height: 50px;
-      width: 50px;
-      border-radius: 50%;
-      background-color: transparent;
-    }
-  }
+},
+//生命周期 - 挂载完成（可以访问DOM元素）
+mounted() {
 
-  .conten {
-    height: 530px;
-    display: flex;
-    flex-wrap: wrap;
-    .row {
-      color: #626260;
-      background-color: #fff;
-      box-shadow: 1px 1px 2px 2px #ccc;
-      cursor: pointer;
-      margin: 20px 30px 10px 0;
-      width: 351px;
-      height: 235px;
-      /deep/.el-image__preview {
-        object-fit: cover;
-      }
-      & > img {
-        width: 351px;
-        height: 200px;
-      }
-      & > p {
-        padding: 0 5px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        font-size: 18px;
-        margin-top: 3px;
-        text-align: center;
-      }
-      &:hover {
-        background-color: #be1220;
-        color: #fff;
-      }
-    }
-    .row:nth-of-type(4n) {
-      margin-right: 0;
-    }
-  }
-  .paging {
-    position: absolute;
-    left: 50%;
-    bottom: 10px;
-    transform: translateX(-50%);
-    /deep/.el-input__inner {
-      width: 30px;
-      height: 30px !important;
-      background-color: transparent;
-      border-radius: 50%;
-    }
-  }
-  .imgBigShow {
-    padding: 3px 5px;
-    background-color: rgba(0, 0, 0, 0.7);
-    font-size: 18px;
-    z-index: 9999;
-    position: fixed;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 100px;
-    color: #fff;
-  }
+},
+beforeCreate() {}, //生命周期 - 创建之前
+beforeMount() {}, //生命周期 - 挂载之前
+beforeUpdate() {}, //生命周期 - 更新之前
+updated() {}, //生命周期 - 更新之后
+beforeDestroy() {}, //生命周期 - 销毁之前
+destroyed() {}, //生命周期 - 销毁完成
+activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
 }
-</style>
+</script>
+<style lang='less' scoped>
+.tab4{
+
+}
+
+</style>