Vue3+TypeScript学习笔记(二十五)

简介: 本节记录自定义指令案例——拖拽盒子相关的内容

由于自定义指令可以获取到真实DOM元素,因此我们可以在自定义指令中为元素绑定各种原生事件,这里以拖拽盒子为案例,需要注意以下几点:

  1. 拖拽盒子会用到left、top之类的属性,只有在开启了定位的元素身上才会存在(相对、绝对、固定等)
  2. 要将鼠标移动事件绑定到要移动的整个大盒子身上,只绑定小盒子会出现各种意外(本例中点击head,但将mousemove添加到了document身上)
  3. 如果直接将left设置为e.clientX,将top设置为e.clientY则盒子默认左上角会跑到鼠标当前所在的位置。此时需要将e.clientX和e.clientY进行回减才能让鼠标在盒子上的位置不变。回减量为let 水平回减量 = e.clientX - el.offsetLeft,let 垂直回减量 = e.clientY - el.offsetTop,最后将e.clientX - 水平回减量,e.clientY - 垂直回减量即可
  4. 最后,由于需要移除事件,addEventListener中的回调必须额外定义,不能直接写在调用参数列表中

完整代码:

App.vue

<template>
    <div v-move class="box">
        <div class="head"></div>
        <div>内容</div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, Directive, DirectiveBinding } from 'vue'

const vMove: Directive = (el: HTMLElement, binding: DirectiveBinding) => {
    let moveElement = <HTMLElement>el.firstElementChild
    const mouseDown = (e: MouseEvent) => {
        // 算出回减量
        let X = e.clientX - el.offsetLeft
        let Y = e.clientY - el.offsetTop
        // 减去回减量
        const move = (e: MouseEvent) => {
            el.style.left = e.clientX - X + 'px'
            el.style.top = e.clientY - Y + 'px'
        }
        document.addEventListener('mousemove', move)
        document.addEventListener('mouseup', () => {
            document.removeEventListener('mousemove', move)
        })
    }
    moveElement.addEventListener('mousedown', mouseDown)
}
</script>

<style scoped>
.box {
    position: fixed;
    width: 200px;
    height: 300px;
    border: 1px solid black;
}
.head {
    width: 100%;
    height: 30px;
    background-color: black;
}
</style>
相关文章
|
5月前
|
JavaScript 前端开发 IDE
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
[译] 用 Typescript + Composition API 重构 Vue 3 组件
|
3月前
|
JavaScript 安全 开发工具
在 Vue 3 中使用 TypeScript
【10月更文挑战第3天】
|
5月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
52 3
|
5月前
|
JavaScript API
如何使用Vue 3和Type Script进行组件化设计
【8月更文挑战第16天】如何使用Vue 3和Type Script进行组件化设计
94 1
|
5月前
|
JavaScript 前端开发 安全
【技术革新】Vue.js + TypeScript:如何让前端开发既高效又安心?
【8月更文挑战第30天】在使用Vue.js构建前端应用时,结合TypeScript能显著提升代码质量和开发效率。TypeScript作为JavaScript的超集,通过添加静态类型检查帮助早期发现错误,减少运行时问题。本文通过具体案例展示如何在Vue.js项目中集成TypeScript,并利用其类型系统提升代码质量。首先,使用Vue CLI创建支持TypeScript的新项目,然后构建一个简单的待办事项应用,通过定义接口描述数据结构并在组件中使用类型注解,确保代码符合预期并提供更好的编辑器支持。
92 0
|
5月前
|
JavaScript 前端开发 安全
立等可取的 Vue + Typescript 函数式组件实战
立等可取的 Vue + Typescript 函数式组件实战
|
5月前
|
JavaScript 前端开发 安全
解锁Vue3与TypeScript的完美搭档:getCurrentInstance带你高效打造未来前端
【8月更文挑战第21天】Vue3的getCurrentInstance方法作为Composition API的一部分,让开发者能在组件内访问实例。结合TypeScript,可通过定义组件实例类型实现更好的代码提示与类型检查,提升开发效率与代码质量。例如,定义一个带有特定属性(如myData)的组件实例类型,可以在setup中获取并安全地修改这些属性。这种方式确保了一致性和减少了运行时错误,使开发更加高效和安全。
209 0
|
5月前
|
JavaScript 测试技术 API
Vue 3 与 TypeScript:最佳实践详解
Vue 3 与 TypeScript:最佳实践详解
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
68 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧

热门文章

最新文章