Vue.js 对话框图片列表组件 - 使用 El-Dialog 实现图片展示和分页加载

<template>
  <el-dialog
    :loading='loading'
    :title='title'
    :visible.sync='dialogVisible'
    :width='width'
    :before-close='handleClose'
  >
    <section ref='box' class='boxstyle'>
      <div class='boxItem'>
        <div v-for='(item, index) in list' :key='index'>
          <el-image class='img' :src='item.path' />
        </div>
      </div>
    </section>
  </el-dialog>
</template>
<script>
export default {
  name: 'DialogImageList',
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50vw'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    api: {
      type: Function,
      default: () => {}
    },
    searcParams: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      params: {
        pageSize: 10,
        pageCurrent: 0,
        total: 0
      },
      list: [],
      loading: false
    }
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.loading = true
        this.api(Object.assign({}, this.params, this.searcParams)).then(res => {
          this.loading = false
          console.log(res, 'dddd')
          this.params.total = res.data.total
          this.params.pageCurrent = res.data.current
          const data = res.data.records.map(item => {
            return {
              path: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
              modifyTime: item.modifyTime
            }
          })
          console.log(data, 'data')
          this.list = data
        })
      }
    }
  },
  mounted() {
    const box = this.$refs.box
    box.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed() {
    const box = this.$refs.box
    if (!box) return
    box.removeEventListener('scroll', this.handleScroll, true)
  },
  methods: {
    handleScroll(e) {
      const clientHeight = e.target.clientHeight // clientHeight是网页在浏览器中的可视高度，
      const scrollTop = e.target.scrollTop // scrollTop是滚动条滚动时，距离顶部的距离
      const scrollHeight = e.target.scrollHeight // scrollHeight是滚动条的总高度
      console.log(scrollTop + clientHeight >= scrollHeight - 10)
      if (scrollTop + clientHeight >= scrollHeight - 10) {
        console.log('____loadMore')
        if (this.params.pageCurrent < this.params.total) {
          this.loadMore()
        }
      }
    },
    // 加载更多
    loadMore() {
      this.loading = true
      this.params.pageCurrent++
      this.api(Object.assign({}, this.params, this.searcParams)).then(res => {
        console.log(res, 'dddd')
        this.loading = false
        this.params.total = res.data.total
        this.params.pageCurrent = res.data.current
        const data = res.data.records.map(item => {
          return {
            path: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            modifyTime: item.modifyTime
          }
        })
        this.list.push(...data)
      })
    },
    // 关闭弹窗 子让父关闭
    handleClose(done) {
      this.$emit('update:dialogVisible', false)
      done()
    }
  }
}
</script>
<style lang='scss' scoped>
.boxstyle {
  height: 500px;
  overflow-y: scroll;
  .boxItem {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .img {
      width: 217px;
      height: 122px;
    }
  }
}
</style>