element-ui 弹窗拖拽

最新推荐文章于 2025-02-17 17:23:35 发布

原创

最新推荐文章于 2025-02-17 17:23:35 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何在Element-UI的弹窗组件中实现拖拽功能。通过创建一个名为`drag.js`的配置文件，并将其放置在`config`路径下，然后在需要拖拽的弹窗组件上添加`v-drag`指令，即可启用拖拽功能。

创建drag.js

放在config路径下

drag.js文件内容为

import Vue from 'vue';
//使用Vue.directive()定义一个全局指令
//1.参数一：指令的名称，定义时指令前面不需要写v-
//2.参数二：是一个对象，该对象中有相关的操作函数
//3.在调用的时候必须写v-
const getAttr = (obj, key) => (
    obj.currentStyle
        ? obj.currentStyle[key]
        : window.getComputedStyle(obj, false)[key]
);
const drag = Vue.directive('drag', {
    // 加上指令
    //1.指令绑定到元素上回立刻执行bind函数，只执行一次
    //2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
    //3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
    bind: function (el) { },
    inserted: function (el) {
     

        const target = el.children[0];
        const header = target.children[0];
        // 鼠标手型
        header.style.cursor = 'move';
        header.onmousedown = (e) => {
            console.log(e)
            // 记录按下时鼠标的坐标和目标元素的 left、top 值
            const currentX = e.clientX;
            const currentY = e.clientY
            const left = parseInt(getAttr(target, 'left'));
            const top = parseInt(getAttr(t