网站建设工作室门头,专业做动漫的网站,以网红引流促业态提升,中职专业设计网站VueUse
VueUse不是Vue.use#xff0c;它是为Vue 2和3服务的一套Vue Composition API的常用工具集#xff0c;是目前世界上Star最高的同类型库之一。它的初衷就是将一切原本并不支持响应式的JS API变得支持响应式#xff0c;省去程序员自己写相关代码。
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 langts
import { ref } from vue
import { useDraggable } from vueuse/coreconst el refHTMLElement | null(null)// style will be a helper computed for left: ?px; top: ?px;
const { x, y, style } useDraggable(el, {initialValue: { x: 40, y: 40 },
})
/scripttemplatediv refel :stylestyle styleposition: fixedDrag 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 }
stylecursor: move; position: fixed; z-index: 999; background: red; padding: 12px;
div Drag me!I am at {{ x }}, {{ y }}/div
/UseDraggableimport { UseDraggable } from vueuse/componentscomponents: {UseDraggable},data 定义 x y 其他具体可参考官方文档 VueUse
