ShangHaiInustrialMuseum/src/views/Treasure.vue

<template>
  <div
    ref="gridWrapperElem"
    class="history"
  >
    <div
      class="grid"
      @mousemove.prevent
      @mousemove="onMouseMove"
      @mouseleave="onMouseLeave"
      @mousedown="onMouseDown"
      @mouseup="onMouseUp"
    >
      <div
        v-for="item in treasureList.value"
        :key="item.id"
        class="cover grid-item"
        @click="!isDragged && $router.push({name: 'TreasureDetail', query: {id: item.id}})"
      >
        <img
          class="photo"
          :src="`${prefix}${item.thumb}`"
          alt=""
          draggable="false"
          load="lazy"
        >
        <h3>{{ item.name }}</h3>
      </div>
    </div>
    <!-- element-ui的loading效果从调用到出现有延时，这期间要遮盖住组件 -->
    <div
      v-show="isShowLoadingMask"
      class="loading-mask"
    />
  </div>
</template>

<script>
export default {
  name: 'TreasureView',
}
</script>

<script setup>
import {
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { ElLoading } from 'element-plus'

const prefix = process.env.VUE_APP_API_ORIGIN

// 滑动功能
let isMouseDown = false
let isDragged = false
const gridWrapperElem = ref('null')
function onMouseDown() {
  isMouseDown = true
  isDragged = false
}
function onMouseUp() {
  isMouseDown = false
}
function onMouseMove(e) {
  if (isMouseDown) {
    console.log(e)
    gridWrapperElem.value.scrollLeft -= e.movementX
    isDragged = true
  }
}
function onMouseLeave(e) {
  isMouseDown = false
}

// 获取数据
let treasureList = reactive({ value: null })
api.getTreasureList().then((res) => {
  treasureList.value = res
})

// 布局相关
onMounted(() => {
  setTimeout(() => {
    const isotopeInst = $('.grid').isotope({
      layoutMode: 'packery',
      itemSelector: '.grid-item',
      packery: {
        horizontal: true,
        // gutter: 10,
      }
    })
  }, 500)
})

// mask相关
const isShowLoadingMask = ref(true)

onMounted(() => {
  const loadingInstance = ElLoading.service({
    background: 'transparent',
  })

  setTimeout(() => {
    // const isotopeInst = $('.grid').isotope({
    //   layoutMode: 'packery',
    //   itemSelector: '.grid-item',
    //   packery: {
    //     horizontal: true,
    //     // gutter: 10,
    //   }
    // })
    isShowLoadingMask.value = false
    loadingInstance.close()
  }, 666)
})
</script>

<style lang="less" scoped>
.history {
  width: 100%;
  height: 100%;
  overflow: auto;
  &::-webkit-scrollbar { background: transparent; width: 0; } /*宽度是对垂直滚动条而言，高度是对水平滚动条而言*/
  &::-webkit-scrollbar-thumb {
    // background: rgba(220, 231, 240, 0.2);
    // border-radius: 2px;
  }
  >.grid {
    height: 100%;
    &::after {
      content: '';
      display: block;
      clear: both;
    }

    >.grid-item {
      float: left;
      position: relative;
      border: 5px solid #000;
      font-size: 0; // 令strut高度为0
      cursor: pointer;
      > img {
        min-width: 100px;
        min-height: 100px;
        max-height: 100vh;
        object-fit: cover;
      }
      >h3 {
        position: absolute;
        left: 0;
        bottom: 5px;
        width: 100%;
        padding: 7px 25px;
        background: linear-gradient(90deg, rgba(176,161,121,0.7) 0%, rgba(0,0,0,0) 100%);
        font-size: 20px;
        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 1.5;
      }
    }
    >.grid-item--width2 { width: 400px; }
    >.grid-item--height2 { height: 400px; }
  }
  .loading-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: black;
  }
}
</style>