YuHuaTai-Pc/vue/src/views/Goods/components/Tow.vue

<!--  -->
<template>
  <div class="Tow">
    <div class="main">
      <div
        class="row"
        @click="lookInfo(item)"
        v-for="(item) in handlData[acInd]"
        :key="item.bs"
      >
        <div v-if="item.imgNum>1">
          <img v-lazy="`goodsData/2D/${item.bs} (1).jpg`" alt="" />
        </div>
        <div v-else><img v-lazy="`goodsData/2D/${item.bs}.jpg`" alt="" /></div>
        <p>{{ item.name }}</p>
      </div>
    </div>
    <!-- 分页 -->
    <Pagination
      class="page"
      layout="prev, pager, next"
      :total="this.data.length"
      @current-change="currentChange"
      :current-page="acInd + 1"
      :page-size="20"
    >
    </Pagination>
    <!-- 点击图片出来的页面 -->
    <Img v-if="type === 'img'" @close="type = ''" :info="info" />
  </div>
</template>

<script>
import { Pagination } from "element-ui";

import _ from "lodash";
import Img from "./Img";
export default {
  name: "Tow",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  //import引入的组件需要注入到对象中才能使用
  components: { Img, Pagination },
  data() {
    //这里存放数据
    return {
      type: "",
      info: {},
      handlData: [],
      acInd: 0,
      pageNum: 0,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    data(val) {
      this.pageNum = 0;
      if (val.length > 20) this.pageNum = Math.ceil(val.length / 20);

      this.acInd = 0;

      this.handlData = _.chunk(val, 20);
      this.$nextTick(() => {
        let dom = document.querySelector(".main");
        dom.scrollTop = 0;
      });
    },
    acInd() {
      this.$nextTick(() => {
        let dom = document.querySelector(".main");
        dom.scrollTop = 0;
      });
    },
  },
  //方法集合
  methods: {
    // 分页器方法
    currentChange(val) {
      this.acInd = val - 1;
      // console.log('当前页改变了', val)
    },

    lookInfo(val) {
      this.info = val;
      this.type = "img";
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (this.data.length > 20) this.pageNum = Math.ceil(this.data.length / 20);

    this.handlData = _.chunk(this.data, 20);
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='less' scoped>
.Tow {
  width: 100%;
  height: calc(100% - 140px);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 10;
  padding: 0 80px 0 160px;
  .main::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 0px;
  }
  .main::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #930909;
  }
  .main::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #d8b275;
  }
  .page {
    height: 6%;
    align-items: center;
    display: flex;
    justify-content: flex-end;
    padding-right: 64px;
  }
  .main {
    width: 100%;
    height: 92%;
    overflow-y: auto;
    padding-right: 60px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    .row {
      cursor: pointer;
      border-radius: 6px;
      overflow: hidden;
      width: 23%;
      height: 280px;
      margin: 0 40px 40px 0;
      background-color: #f0f1f3;
      & > div {
        width: 100%;
        height: 210px;
        padding: 20px;
        & > img {
          width: 100%;
          height: 100%;
          object-fit: contain;
        }
      }
      & > P {
        display: flex;
        align-items: center;
        height: 70px;
        padding: 3px 5px;
        font-size: 16px;
        color: #666666;
        line-height: 24px;
        background-color: #fff;
      }
      &:hover {
        & > P {
          color: #930909;
        }
      }
      &:nth-of-type(4n) {
        margin-right: 0;
      }
    }
    @media screen and (max-width: 1800px) {
      .row {
        width: 22%;
      }
    }
  }
}
</style>