Vue3 Quasar簡易Lazy Loading

直接上代碼

src/mixins/lazyLoad.js

import { reactive } from 'vue'

export default function () {
  const inView = reactive([])
  const onIntersection = (entry) => {
    if (entry.isIntersecting === true) {
      add(`${entry.target.dataset.id}`)
    }
  }

  function add(i) {
    inView.push(i)
    inView.sort(sortAtoi)
  }

  function sortAtoi(a, b) {
    return Number(a) - Number(b)
  }
	return {
		inView,
		onIntersection
	}
}

調用方法：

這裡的v-intersection是利用qusasr 套件的Directive​​​​​​​ 

以上