Vueuse组件库中配合vue3的组合API的一些好用的方法

安装

npm i @vueuse/core@5.3.0

（1）useIntersectionObserver 来实现监听进入可视区域行为、

使用方法：

// const {stop} = useIntersectionObserver(target, fn, options)

// 1、参数一target表示被监听的DOM元素

// 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参isIntersecting表示被监听的元素已经进入了可视区）

// 3、表示配置选项

// stop 是停止观察是否进入或移出可视区域的行为

const { stop } = useIntersectionObserver(

// target 是观察的目标dom容器，必须是dom容器，而且是vue3.0方式绑定的dom对象

target,

// isIntersecting 是否进入可视区域，true是进入 false是移出

// observerElement 被观察的dom

([{ isIntersecting }], observerElement) => {

// 在此处可根据isIntersecting来判断，然后做业务

},

)

 （2）useVModel：实现双向绑定

import { useVModel } from '@vueuse/core'

export default {
  name: 'Checkbox',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    }
  },

  //  使用useVModel
  setup(props, { emit }) {
    const checked = useVModel(props, 'modelValue', emit)
  
    return { checked }
  }
}

（3）useMouseInElement方法获取基于元素的偏移量

<template>
  <div ref="target">
    <h1>Hello world</h1>
  </div>
</template>

<script>
import { ref } from 'vue'
import { useMouseInElement } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    const { elementX, elementY, isOutside } = useMouseInElement(target)

    return {elementX, elementY, isOutside }
  }
}
</script>

总结：方法的参数target表示被监听的DOM对象；返回值elementX, elementY表示被监听的DOM的左上角的位置信息left和top；isOutside表示是否在DOM的范围内，true表示在范围之外。false表示范围内。

可以获取的数据

x: Ref<number>
  y: Ref<number>
  sourceType: Ref<MouseSourceType>
  elementX: Ref<number>
  elementY: Ref<number>
  elementPositionX: Ref<number>
  elementPositionY: Ref<number>
  elementHeight: Ref<number>
  elementWidth: Ref<number>
  isOutside: Ref<boolean>

（4）onClickOutside方法获取点击的外的区域

<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    onClickOutside(target, (event) => console.log(event))

    return { target }
  }
}
</script>

（5）useWindowScroll（）方法可获取页面股滚动的距离

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()