本文主要是介绍VueUse工具库,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
VueUse
VueUse不是Vue.use,它是为Vue 2和3服务的一套Vue Composition API的常用工具集,是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式,省去程序员自己写相关代码。
VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包支持了更好的逻辑分离,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了机遇 Composition API 的封装。
import { 具体方法 } from ‘@vueuse/core’
一些方法的具体用法
- useMouse:监听当前鼠标坐标的一个方法,他会实时的获取鼠标的当前的位置
- useLocalStorage:据持久化到本地存储中
- throttleFilter:节流 throttleFilter(100)
- debounceFilter:防抖 debounceFilter(100)
- OnClickOutside:在点击元素外部时触发一个回调函数
- **注意:**这里的 OnClickOutside 函数是一个组件,不是一个函数。需要package.json 中安装了 @vueuse/components。
- useDraggable
在vue中利用useDraggable实现antDesign中的Modal移动
官方示例:
<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'const el = ref<HTMLElement | null>(null)// `style` will be a helper computed for `left: ?px; top: ?px;`
const { x, y, style } = useDraggable(el, {initialValue: { x: 40, y: 40 },
})
</script><template><div ref="el" :style="style" style="position: fixed">Drag me! I am at {{x}}, {{y}}</div>
</template>
useDraggable 接收两个参数:target拖拽目标元素。options为可选参数
Component Usage
需要安装
npm i @vueuse/core @vueuse/components
<UseDraggable :initialValue="{ x: 10, y: 10 }" v-slot="{ x, y }">Drag me! I am at {{x}}, {{y}}
</UseDraggable>
本地vue2示例
<UseDraggable
:initialValue="{ x: 10, y: 10 }"
v-slot="{ x, y }"
style="cursor: move; position: fixed; z-index: 999; background: red; padding: 12px;"
><div >Drag me!I am at {{ x }}, {{ y }}</div>
</UseDraggable>import { UseDraggable } from '@vueuse/components'components: {UseDraggable},data 定义 x y
其他具体可参考官方文档 :VueUse
这篇关于VueUse工具库的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!