vue3弹窗拖拽

1.创建index.js文件夹

import { createApp } from "vue";
// import App from "./App.vue";
// const app = createApp(App);
export default {
    install(app) {
        // v - dialogDrag: 弹窗拖拽属性
        app.directive("drag", {
            mounted(n, binding, vnode, oldVnode) {
                let dialogHeaderEl = null;
                let dragDom = null;
                if (n.parentElement.className == "modle") {
                    dialogHeaderEl = n;
                    dragDom = n.parentElement.parentElement;
                    dragDom.style.cssText += ";top:50%;";
                } else {
                    dialogHeaderEl = n.parentElement;
                    dragDom = n.parentElement.parentElement;

                    dragDom.style.cssText += ";top:0px;";
                }
                dialogHeaderEl.style.cssText += ";cursor:move;";

                // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
                const sty = (function () {
                    if (window.document.currentStyle) {
                        return (dom, attr) => dom.currentStyle[attr];
                    } else {
                        return (dom, attr) =>
                            getComputedStyle(dom, false)[attr];
                    }
                })();

                dialogHeaderEl.onmousedown = (e) => {
                    // 鼠标按下，计算当前元素距离可视区的距离
                    const disX = e.clientX - dialogHeaderEl.offsetLeft;
                    const disY = e.clientY - dialogHeaderEl.offsetTop;

                    const screenWidth = document.body.clientWidth; // body当前宽度
                    const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度，可某些环境下无法获取)

                    const dragDomWidth = dragDom.offsetWidth; // 对话框宽度
                    const dragDomheight = dragDom.offsetHeight; // 对话框高度

                    const minDragDomLeft = dragDom.offsetLeft;
                    const maxDragDomLeft =
                        screenWidth - dragDom.offsetLeft - dragDomWidth;

                    const minDragDomTop = dragDom.offsetTop;
                    const maxDragDomTop =
                        screenHeight - dragDom.offsetTop - dragDomheight;

                    // 获取到的值带px 正则匹配替换
                    let styL = sty(dragDom, "left");
                    let styT = sty(dragDom, "top");

                    // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
                    if (styL.includes("%")) {
                        styL =
                            +document.body.clientWidth *
                            (+styL.replace(/\%/g, "") / 100);
                        styT =
                            +document.body.clientHeight *
                            (+styT.replace(/\%/g, "") / 100);
                    } else {
                        styL = +styL.replace(/\px/g, "");
                        styT = +styT.replace(/\px/g, "");
                    }

                    document.onmousemove = function (e) {
                        // 通过事件委托，计算移动的距离
                        let left = e.clientX - disX;
                        let top = e.clientY - disY;
                        // 边界处理
                        if (-left > minDragDomLeft) {
                            left = -minDragDomLeft;
                        } else if (left > maxDragDomLeft) {
                            left = maxDragDomLeft;
                        }

                        if (-top > minDragDomTop) {
                            top = -minDragDomTop;
                        } else if (top > maxDragDomTop) {
                            top = maxDragDomTop;
                        }

                        // 移动当前元素
                        dragDom.style.cssText += `;left:${left + styL}px;top:${
                            top + styT
                        }px;`;
                    };

                    document.onmouseup = function (e) {
                        document.onmousemove = null;
                        document.onmouseup = null;
                    };
                };
            },
        });
    },
};

2.main.js

import elDialogDrag from "@/el-drag-dialog/index.js"; //引入文件
app.use(naive)
    .use(router)
    .use(store)
    .use(elDialogDrag)

3.使用拖拽 v-drag

  <n-modal
        v-model:show="showModal"
        :show-icon="false"
        preset="dialog"
        :title="modalTitle"
        :style="{ width: '700px' }"
    >
        <template #header>
            <div v-drag>
                <div class="drag">{{ modalTitle }}</div>
            </div>
        </template>
        <n-form
            :label-width="120"
            :model="addFormValue"
            :rules="addFormRules"
            size="medium"
            label-placement="left"
            ref="addFormRef"
        >
        
        </n-form>
        <template #action>
            <n-space>
                <n-button @click="() => (showModal = false)">取消</n-button>
                <n-button @click="handleClick('sure')">确定</n-button>
            </n-space>
        </template>
    </n-modal>