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移动

官方示例：

 useDraggable 接收两个参数：target拖拽目标元素。options为可选参数

Component Usage

需要安装  

npm i @vueuse/core @vueuse/components

  Drag me! I am at {{x}}, {{y}}

 本地vue2示例

   

    Drag me!I am at {{ x }}, {{ y }}
   



import { UseDraggable } from '@vueuse/components'


 components: {
    UseDraggable
 },

data 定义 x y 

 

其他具体可参考官方文档 ：VueUse