const observer = new IntersectionObserver(callback, option);

// 獲取元素
const target = document.getElementById("dom");

// 開始觀察
io.observe(target);

// 獲取元素
const target = document.getElementById("dom");

// 停止觀察
io.unobserve(target);

// 關(guān)閉觀察器
io.disconnect();

// 頁面加載時(shí)監(jiān)聽元素
onMounted(() => {
	var demo3 = document.querySelector('document.querySelector(dom))  //  獲取元素
	var observer = new IntersectionObserver((mutaions)=>{  // 創(chuàng)建IntersectionObserver對象
	        console.log(mutaions[0].isIntersecting)
	      })
	observer.observe(demo3)       // 需要監(jiān)聽的元素 
}       

// 獲取被觀察元素
const observerList = io.takeRecords();

const io = new IntersectionObserver((changes, observer) => {
  console.log(changes);
  console.log(observer);
});

onMounted(() => {
	var observer = new IntersectionObserver((entries) => {
		  console.log(111111, entries[0].isIntersecting);
		  dataMap.showMyBox = !entries[0].isIntersecting; //返回true代表在頁面可視區(qū)域，false代表不在頁面可視區(qū)域。
		});
		 observer.observe(document.querySelector(dom));
}

// 頁面卸載時(shí)可解綁
onBeforeUnmount(() => {
	  if (observer) {
		    observer.unobserve(document.querySelector(dom)); //解綁元素
		    observer.disconnect(); //停止監(jiān)聽
	  }
});

/**
 * @method lazyLoad
 * @param {NodeList} $imgList      圖片元素集合
 * @param {number}   preloadHeight 預(yù)加載高度
 */
export function lazyLoad($imgList, preloadHeight = 1000) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) { // 目標(biāo)元素出現(xiàn)在 root 可視區(qū)，返回 true
        const $target = entry.target
        const src = $target.getAttribute('lazyload')

        if (src) {
          $target.setAttribute('src', src) // 真正加載圖片
        }
        observer.unobserve($target) // 解除觀察
      }
    })
  }, {
    rootMargin: `0px 0px ${preloadHeight}px 0px`,
  })

  Array.prototype.forEach.call($imgList, ($item) => {
    if ($item.getAttribute('src')) return // 過濾已經(jīng)加載過的圖片
    observer.observe($item) // 開始觀察
  })
}

// 圖片元素設(shè)置 lazyload 屬性
<img lazyload="圖片鏈接" alt="圖片說明">

// 觀察圖片元素
lazyLoad(document.querySelectorAll("[lazyload]"))

/**
 * @method fixBanner
 * @param {HTMLElement} $observeEle 觀察元素
 * @param {HTMLElement} $fixEle     固定定位元素
 */
export function fixBanner($observeEle, $fixEle) {
  const $ele = $fixEle
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        $ele.style.cssText = ''
      } else {
        $ele.style.cssText = 'position: fixed; top: 0; left: 0'
      }
    })
  }, {
    threshold: 1, // threshold 設(shè)置為 1 表示目標(biāo)元素完全可見時(shí)觸發(fā)回調(diào)函數(shù)
  })

  observer.observe($observeEle) // 開始觀察
}

function loadMore() {
  const observer = new IntersectionObserver(
    (entries) => {
      const loadingEntry = entries[0]

      if (loadingEntry.isIntersecting) {
        // 請求數(shù)據(jù)并插入列表
      }
    },
    {
      rootMargin: '0px 0px 600px 0px', // 提前加載高度
    },
  )

  observer.observe(document.querySelector('.mod_loading')) // 觀察尾部元素
}