vue3相关use函数vueuse(二)

更多文章

前言

继续vueuse的其余部分

useMouseInElement

鼠标在元素内位置以及鼠标是否在元素内

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

export default {
  setup() {
    const target = ref(null)
    // x: 鼠标在屏幕x轴位置
    // y: 鼠标在屏幕y轴位置
    // isOutside: 鼠标是否在元素中
    // elementX: 鼠标在元素x轴位置
    // elementY: 鼠标在元素y轴位置
    // elementWidth: 元素自身宽度
    // elementHeight 元素自身高度
    const {
      x,
      y,
      isOutside,
      elementX,
      elementY,
      elementWidth,
      elementHeight,
    } = useMouseInElement(target)

    return { isOutside }
  }
}

usePageLeave

鼠标否在浏览器内

import { usePageLeave } from '@vueuse/core'

const isLeft = usePageLeave()

usePointerSwipe

记录鼠标在元素内按下后移动的位置

import { usePointerSwipe } from '@vueuse/core'

const { isSwiping, direction, distanceX, distanceY } = usePointerSwipe(el, {
  onSwipe: () => {
    console.log('ing')
  },
  onSwipeStart: () => {
    console.log('start')
  },
  onSwipeEnd: () => {
    console.log('end')
  }
})

return { el, isSwiping, direction, distanceX, distanceY }

useScroll

记录是否处于滚动中、滚动的位置、是否到底部等

import { useScroll } from '@vueuse/core'
// arrivedState 包含left/right/top/botton四个值，为true则表示触底
const { x, y, isScrolling, arrivedState } = useScroll(el)

useInterval

计数器，可以控制是否初始化执行，或手动执行停止

import { useInterval } from '@vueuse/core'
// counter初始为0，200毫秒+1
const counter = useInterval(200)
// immediate: 初始化是否执行
// controls： 开启手动执行
// resume： 开始
// pause：停止
const { counter, pause, resume } = useInterval(200, { immediate: false, controls: true })

useIntervalFn

setInterval的封装, 可以自定义方法

import { useIntervalFn } from '@vueuse/core'

const { pause, resume, isActive } = useIntervalFn(() => {
  console.log('custom fn')
}, 1000, { immediate: false })

useTimeoutFn

setTimeout的封装, 可以自定义方法

import { useTimeoutFn } from '@vueuse/core'

const { isPending, start, stop } = useTimeoutFn(() => {
  console.log('done')
}, 3000, { immediate: false })

useNow

获取当前实时时间，可以控制时间的更新频率和方式

import { useNow } from '@vueuse/core'

const now = useNow()
// 采用requestAnimationFrame方式更新，pause可以停止更新
const { now, pause, resume } = useNow({ controls: true, interval: 'requestAnimationFrame' })
// 3s更新一次
const { now } = useNow({ controls: true, interval: 3000 })

useRafFn

对requestAnimationFrame的封装

import { ref } from '@vue/composition-api'
import { useRafFn } from '@vueuse/core'

const { pause, resume } = useRafFn(() => {
  count.value++
}, { immediate: false })

resume()

useTransition

useTransition可以配合做一些过度效果

import { ref } from 'vue'
import { TransitionPresets, useTransition } from '@vueuse/core'

const source = ref(0)

const output = useTransition(source, {
  duration: 1000,
  transition: TransitionPresets.easeInOutCubic,
})

setTimeout(() => source.value = 100, 1000)

结语

抽空整理一部分，剩余部分下次在整理