vueUse 的应用

安装

npm i @vueuse/core

vueuse 官方文档 (opens new window)

获取滚动距离

import { useScroll } from "@vueuse/core";
const { y } = useScroll(window);

监听元素进入视口

import { useIntersectionObserver } from "@vueuse/core";
// el:要监听的元素
//  isIntersecting：元素是否进入视口 布尔值
// stop：停止监听方法
const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
  console.log("元素进入视口", isIntersecting);
  if (isIntersecting) {
    el.src = binding.value;
    //图片加载完毕后停止监听
    stop();
  }
});

获取鼠标相对位置

import { useMouseInElement } from "@vueuse/core";
//el:相对的元素 默认为相对屏幕
//elementX 元素相对的左边left值
//elementY 元素相对的顶部top值
//isOutside 鼠标是否在元素外 布尔值
const { elementX, elementY, isOutside } = useMouseInElement(el);