VueUser中实用的方法

·枫

已于 2023-05-16 17:12:16 修改

阅读量377

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

于 2023-05-10 19:39:44 首次发布

本文链接：https://blog.youkuaiyun.com/w_z_bin/article/details/130607969

文章介绍了Vueuse库中的一些实用工具，如useVModel用于实现自定义组件的双向数据绑定，useMouseInElement跟踪鼠标相对于元素的位置，useIntersectionObserver检测元素的可视性，以及useWindowScroll获取窗口滚动信息。这些工具增强了Vue应用的交互性和响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

useVModel

// 使用useVModel实现双向数据绑定v--model指令
    // 1. 使用props接收data
    // 2. 使用useVModel来包装props中的modelValue属性数据
    // 3. 在使用data.value就是使用父组件数据
    // 4. 在使用checked.value = '数据' 赋值，数据改变触发emit('update:modelvalue', '数据')
    //5.相当于v-model双向进行了数据的绑定，子组件内可以直接进行了该值，因为会自动触发emit事件函数
import { useVModel } from '@vueuse/core'

export default {
  props: {
    data: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, { emit }) {
    //这一行相当都 
    //const data = ref(null)
    //data.value = props.data
    // 改变时触发emit('update:data,data')
    const data = useVModel(props, 'data', emit)
    console.log(data.value) // props.data
    data.value = 'foo' // emit('update:data', 'foo')
  },
}

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)
    //将元素target传入 useMouseInElement
    const { x, y, isOutside } = useMouseInElement(target)
  / x: 832 鼠标基于浏览器的所在位置
    y: 608 鼠标基于浏览器的所在位置
    sourceType: 'mouse'
    elementX: 350.58074951171875 鼠标基于元素的所在位置
    elementY: 264.0785140991211  鼠标基于元素的所在位置
    elementPositionX: 481.41925048828125
    elementPositionY: 343.9214859008789
    elementHeight: 160
    elementWidth: 160
    isOutside: true 是否离开了元素 /
    return { x, y, isOutside }
  }
}
</script>

useIntersectionObserver

响应式监听目标元素的可见性。

<div ref="target">
  <h1>Hello world</h1>
</div>
js
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const targetIsVisible = ref(false)
    //useIntersectionObserver响应式监听元素是否在可视区域内
    const { stop } = useIntersectionObserver(
    //监听的元素
      target,
    //进入可视区内isIntersecting 会变为true
      ([{ isIntersecting }], observerElement) => {
    //可在此处做进入可视区后的逻辑 stop是停止监听
        targetIsVisible.value = isIntersecting
      },
     {
      // 交叉比
      threshold: 0,
    }
    )

    return {
      target,
      targetIsVisible,
    }
  },
}

useWindowScroll

获取元素被卷去了多少

import { useWindowScroll } from '@vueuse/core'

const { x, y } = useWindowScroll()

console.log(y); //头部被卷去的距离