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

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 -= 10
  e.preventDefault()
})
onKeyStroke(['s', 'S', 'ArrowDown'], (e: KeyboardEvent) => {
  translateY.value += 10
  e.preventDefault()
})
onKeyStroke(['a', 'A', 'ArrowLeft'], (e: KeyboardEvent) => {
  translateX.value -= 10
  e.preventDefault()
})
onKeyStroke(['d', 'D', 'ArrowRight'], (e: KeyboardEvent) => {
  translateX.value += 10
  e.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>