vueuse（函数库）的基本使用

vueuse这个是我发现不久的一个函数工具库，在这里面中有封装好的各种各样的函数，极大的方便了我们在开发过中的各种造轮子。下面以useDraggable这个函数作为演示，如果说你有拖拽dialog（对话框）的需求的话，使用这个函数将会极大地简化你的开发。

（1）下载依赖包

npm i @vueuse/core

（2）在页面中引入相关函数

import { useDraggable } from '@vueuse/core'

（3）为其指定一个对应的载体容器

<div class="container border-base"><div ref="el" class="ball" v-bind:style="style" :style="{ transform: `translate(${translateX}px, ${translateY}px)`, position: 'fixed', cursor: 'move' }" /></div>

可以通过ref获取到指定的元素容器

（4）书写相应的执行逻辑

useDraggable可以接收两个参数（ ref, { x: 80 y: 80 }）x和y指定初始的容器位置。基本代码书写如下：

const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el, {initialValue: { x: 40, y: 40 }
})

在useDraggable函数的返回值中解构出三个属性x,y,style, x和y 指的是他们当前所处的位置，style可以用于控制他们的css样式，来达到操作其位置的目的。

（5）执行结果展示

（6）代码demo分享

<template><div class="container-ytt"><div class="container border-base"><div ref="el" class="ball" v-bind:style="style" :style="{ transform: `translate(${translateX}px, ${translateY}px)`, position: 'fixed', cursor: 'move' }" /></div></div>
</template><script setup lang="ts">
import router from '@/router'
import { ref, reactive } from 'vue'
import { onKeyStroke, useDraggable } from '@vueuse/core'const translateX = ref(0)
const translateY = ref(0)const el = ref<HTMLElement | null>(null)
const { x, y, style } = useDraggable(el, {initialValue: { x: 40, y: 40 }
})onKeyStroke(['w', 'W', 'ArrowUp'], (e: KeyboardEvent) => {translateY.value -= 10e.preventDefault()
})
onKeyStroke(['s', 'S', 'ArrowDown'], (e: KeyboardEvent) => {translateY.value += 10e.preventDefault()
})
onKeyStroke(['a', 'A', 'ArrowLeft'], (e: KeyboardEvent) => {translateX.value -= 10e.preventDefault()
})
onKeyStroke(['d', 'D', 'ArrowRight'], (e: KeyboardEvent) => {translateX.value += 10e.preventDefault()
})
</script><style lang="less" scoped>
.container-ytt {display: flex;align-items: center;justify-content: center;height: 100%;background-color: #e5e5e5;.form-con {height: 200px;width: 40%;h1 {text-align: center;color: #fff;}}
}
.container {height: 200px;width: 200px;background-color: #666;.ball {height: 50px;width: 50px;background-color: #fff;border-radius: 50%;}
}
</style>

vueuse（函数库）的基本使用，宝藏神器，务必收藏相关推荐

5 个可以加速开发的 VueUse 函数库
vueUse 是 Anthony Fu 的一个开源项目,它为 vue 开发人员提供了大量适用于 Vue 2 和 Vue 3 的基本 Composition API 实用程序函数. 它有几十个解决方案, ...
php中操作mysql的函数库
发现php中的mysql库是一个函数库而不是一个类库使用面向过程的形式组织. mysql_affected_rows -- 取得前一次 MySQL 操作所影响的记录行数 mysql_change ...
在Uubuntu 14.04 64bit上搭建NumPy函数库环境
为了研究<机器学习实战>这本书, 我需要使用Python来编写代码, 特别需要使用NumPy这个函数库.为此,按照书上的说明, 验证如下. 直接在Linux终端输入python进入其命令行 ...
c int转字符串_【C++实现python字符串函数库】字符串匹配函数startswith与endswith
[C++实现python字符串函数库]字符串匹配函数startswith与endswith 这两个函数用于匹配字符串的开头或末尾,判断是否包含另一个字符串,它们返回bool值.startswith() ...
php bc函数库,PHP高精确度运算BC函数库实例详解
本文实例讲述了PHP高精确度运算BC函数库.分享给大家供大家参考,具体如下: /************************************************************ ...
现代 JavaScript 函数库 usuallyjs 的安装和使用
usuallyjs usuallyjs 是一个面向现代 Web 开发的 JavaScript 实用函数库. usuallyjs 基于 ES6 开发,抛弃了传统 Web 开发中 DOM 和 BOM 操作 ...
请问用Microsoft的VFW函数库怎样设置摄像头的速度?
请问用Microsoft的VFW函数库怎样设置摄像头的速度? Delphi / Windows SDK/API http://www.delphi2007.net/DelphiMultimedia/h ...
开源纯C日志函数库iLOG3快速入门（八、如果你喜欢简单日志函数甚于日志函数库）...
2019独角兽企业重金招聘Python工程师标准>>> 开源纯C日志函数库iLOG3快速入门(八.如果你喜欢简单日志函数甚于日志函数库) 很多网友来信坚持表达了在项目中应使用简单日志 ...
DPDK — 扩展私有函数库
目录文章目录目录 DPDK 扩展第三方函数库扩展一个新的 libfoo 库添加扩展库的启用配置实现扩展库添加扩展库的 Makefile 重新编译安装 DPDK 的目标环境在自己的 DPD ...

vueuse（函数库）的基本使用，宝藏神器，务必收藏