VueUse 学习 —— useDraggable

维维酱
1,836 阅读5分钟

useDraggable是VueUse库提供的一个自定义 hook，它提供了一些功能和响应式数据，使得元素能够通过鼠标或触摸事件进行拖拽操作。

使用useDraggable可以将拖拽功能轻松地添加到 Vue 组件中。通过传入目标元素和配置选项，可以自定义拖拽的行为和样式。

useDraggable的返回值是一个对象，包含了一些属性和方法：

  • position：表示元素的当前位置，是一个包含 x 和 y 属性的响应式对象。
  • isDragging：表示元素是否正在被拖拽的布尔值，是一个计算属性。
  • style：表示元素的样式字符串，用于在模板中绑定样式。
  • x：表示元素在水平方向上的位置，是一个响应式数据。
  • y：表示元素在垂直方向上的位置，是一个响应式数据。

通过使用这些属性和方法，可以轻松地实现拖拽功能并在组件中处理拖拽过程中的逻辑和样式变化。

用法

示例：

<script setup lang="ts">
import { ref } from 'vue'
import { useDraggable } from '@vueuse/core'

const el = ref<HTMLElement | null>(null)

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 :initialValue="{ x: 10, y: 10 }" v-slot="{ x, y }">
  Drag me! I am at {{x}}, {{y}}
</UseDraggable>

对于这种用法，可以传递额外的storageKey和storageType属性给组件，从而实现元素位置的持久化。

<UseDraggable storage-key="vueuse-draggable" storage-type="session">
  Refresh the page and I am still in the same position!
</UseDraggable>

通常情况下，使用useDraggable可组合函数或其对应的无渲染组件时，元素的位置只在组件的生命周期内保持有效。也就是说，当组件被销毁或重新渲染时，元素的位置会重置为初始值。

但是，通过传递storageKey和storageType属性，可以将元素的位置信息存储在持久化的存储介质中，如本地存储或会话存储。这样，即使组件被销毁或重新渲染，元素的位置信息仍然可以从存储介质中读取并还原到之前的位置。

storageKey属性用于指定存储的键名，即在存储介质中用于标识元素位置信息的唯一键值。而storageType属性用于指定存储的类型，可以是本地存储（localStorage）或会话存储（sessionStorage）。

通过使用storageKey和storageType属性，可以使元素的位置信息在页面刷新或组件重新渲染后保持不变，实现持久化的元素位置存储。

在VueUse的5.0版本中引入了一个新的包，即@vueuse/components，该包提供了基于可组合函数的无渲染组件版本。

在VueUse中，可组合函数是一种函数式的编程模式，它们提供了可重用的逻辑和功能，可以在Vue组件中进行复用。可组合函数通常通过setup()函数在Vue组件中使用。

而在@vueuse/components包中，这些可组合函数被转化为无渲染组件的形式，意味着它们不直接提供任何视图层的渲染，而是将可组合函数的逻辑和功能封装在一个组件中，供开发者在自己的Vue组件中使用。

源码分析

源码地址：github.com/vueuse/vueu…

这段代码定义了useDraggable函数的接口和返回类型。

  1. UseDraggableOptions是useDraggable函数的配置选项接口，它包含了一系列可选的属性，用于自定义拖拽行为。其中包括：

    • exact：仅在直接点击元素时开始拖拽，默认为false。
    • preventDefault：阻止事件的默认行为，默认为false。
    • stopPropagation：阻止事件的传播，默认为false。
    • capture：指定事件是否在捕获阶段触发，默认为true。
    • draggingElement：要附加pointermove和pointerup事件的元素，默认为window。
    • handle：触发拖拽事件的手柄元素，默认为target。
    • pointerTypes：监听的指针类型，默认为['mouse', 'touch', 'pen']。
    • initialValue：元素的初始位置，默认为{ x: 0, y: 0 }。
    • onStart：拖拽开始时的回调函数，返回false可以阻止拖拽。
    • onMove：拖拽过程中的回调函数。
    • onEnd：拖拽结束时的回调函数。
    • axis：拖拽的轴向，默认为'both'。

  2. useDraggable函数是用于使元素可拖拽的函数，它接受一个target参数表示要拖拽的目标元素，以及一个可选的options参数用于配置拖拽行为。

  3. 函数的返回值是一个对象，包含了一些响应式的数据和方法：

    • position：一个Ref，表示当前元素的位置，包含x和y属性。
    • isDragging：一个ComputedRef，表示元素是否正在被拖拽。
    • style：一个ComputedRef，表示元素的样式字符串，用于在模板中绑定样式。
    • x：一个Ref，表示元素在x轴上的位置。
    • y：一个Ref，表示元素在y轴上的位置。

  4. useDraggable接受target和options作为参数，其中target表示要拖拽的目标元素，options表示配置选项。

  5. 在函数内部，使用Vue的ref函数创建了一些响应式的变量，如position、pressedDelta。

  6. 定义了一些事件处理函数，如start、move、end，用于处理拖拽过程中的事件。

  7. 根据配置选项，监听目标元素上的pointerdown、拖拽元素上的pointermove和pointerup事件，并将事件绑定到对应的事件处理函数上。

  8. 返回一组响应式的数据和方法，包括position（当前位置坐标）、isDragging（是否正在拖拽）、style（计算样式字符串）等。

avatar
文章
阅读
粉丝