@vueuse/core是一个包,封装了常见的一些交互逻辑
使用步骤:
- 安装
npm i @vueuse/core
- 使用其中的功能
<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表示完全出现才触发
}
)
该方法通常运用于实现组件与图片的懒加载