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); //头部被卷去的距离