阅读 176

实用工具 -@vueuse/core

@vueuse/core是一个包,封装了常见的一些交互逻辑

使用步骤:

  1. 安装
npm i @vueuse/core
复制代码
  1. 使用其中的功能
<script>
import { 引入相关功能函数 } from '@vueuse/core'
export default {
  setup () {
      // const 变量接收 = 相关功能函数
  }
}
</script>
复制代码

获取滚动距离方法

<script>
// 引入
import { useWindowScroll } from '@vueuse/core'
export default {
  setup () {
    //x表示距离左侧的滚动距离,一般不使用
    //y表示距离顶部的滚动距离 会动态更新
    const { y } = useWindowScroll()
    return { y }
  }
}
可用于页面导航吸顶
</script>
复制代码

监视dom元素是否出现在视口的方法

// 引入
import { useIntersectionObserver } from '@vueuse/core'
// stop 是一个可执行的方法 调用就会停止监听 target为目标dom节点,
//不使用stop会多次触发,不会只监听一次  只要进入视口或者离开视口回调函数都会执行
const { stop } = useIntersectionObserver(
      target,
      ([{ isIntersecting }], observerElement) => {
              //isIntersecting值为true或false 
            if (isIntersecting) { // ture代表进入视口 反之为未进入视口
              
              target... // 对目标节点进行操作
              stop()  // 监视一次后停止 
            }
      }, 
      {
        threshold: 0  //值为0-1  表示目标dom出现在视口的指定比例触发回调
                      //0表示一出现就触发,1表示完全出现才触发
      }
)
该方法通常运用于实现组件与图片的懒加载      
复制代码

更多方法:vueuse.org/core/useWin…

文章分类
前端
文章标签