vue3+ts实现右边悬浮按钮可上下拖动

最新推荐文章于 2025-03-13 14:32:06 发布

toocool404

最新推荐文章于 2025-03-13 14:32:06 发布

阅读量1.6k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_45941959/article/details/132969420

版权

本文介绍了如何在Vue应用中创建一个自定义拖拽指令floatMove，包括在utils文件夹中编写指令代码、在main.js中全局注册以及在页面上使用v-dialogDrag指令。作者详细解释了指令的实现过程和相关事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
一、创建自定义指令文件
在utils文件夹下创建 floatMove.ts 文件

// 拖拽的指令
const drag = {
   
    beforeMount(el: any, binding: any,) {
   
        // 自定义属性，判断是否可拖拽
        if (!binding.value) return
        // 获取自定义指令所在的dom元素
        const dialogHeaderEl = el.querySelector('.dialog_header')
        const dragDom = el.querySelector('.dialog_content')
        dialogHeaderEl.style.cssText += ';cursor:move;'
        dragDom.style.cssText += ';bottom:45%;' //初始化位置

        // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
        const sty = (function () {
   
            if ((document.body as any).currentStyle) {
   
                // 在ie下兼容写法
                return (dom: any, attr: any) => dom.currentStyle[attr]
            }
            return (dom: any, attr: any) => getComputedStyle(dom, null)[attr]
        })()