vue实现可拖拽dialog封装

一、实现modal弹窗组件

<template><divv-if="visible"class="customer-dialog"id="customer-dialog":style="dialogStyles"v-dialogDrag:[dialogDrag]><div class="dialog-container"><divclass="dialog-header"id="dialog-header":style="{'--dialog-center': `${center ? 'center' : 'left'}`}"><slot name="header" v-if="footerHide"><span class="dialog__title">{{ title }}</span></slot><button class="dialog__header-close" @click="closeDialog"><i class="el-dialog__close el-icon el-icon-close"></i></button></div><div class="dialog-body"><slot> </slot></div><divclass="dialog-footer":style="{'--dialog-center': `${center ? 'center' : 'right'}`}"v-if="footerHide"><slot name="footer"><el-button size="small" @click="closeDialog">取消</el-button></slot></div></div></div>
</template><script>
export default {name: 'CustomDialog',props: {title: {type: String,default: 'Default Title'},/*** @description 是否开启拖拽功能* @default false*/dialogDrag: {type: Boolean,default: false},width: {type: [Number, String],default: 500},maxHeight: {type: [Number, String],default: 800},/*** 未传值时候，默认* top: 30%* 传入值时候，以传入值为准*/top: {type: Number,default: 0},/*** 未传值时候，默认* left: 50%* 传入值时候，以传入值为准*/left: {type: Number,default: 0},zIndex: {type: Number,default: 9999},/*** 是否显示* @default false*/value: {type: Boolean,default: false},/*** 是否居中* @default true*/center: {type: Boolean,default: false},/*** 是否隐藏footer* @default false*/footerHide: {type: Boolean,default: false},/*** 是否隐藏header* @default false*/headerHide: {type: Boolean,default: false}},computed: {dialogStyles () {return {'--dialog-width':typeof this.width === 'number' ? `${this.width}px` : this.width,'--dialog-max-height':typeof this.maxHeight === 'number'? `${this.maxHeight}px`: this.maxHeight,'--dialog-top': this.top? typeof this.top === 'number'? `${this.top}px`: this.top: '30%','--dialog-left': this.left? typeof this.left === 'number'? `${this.left}px`: this.left: '50%','--dialog-z-index': this.zIndex};},visible: {get () {return this.value;},set (val) {this.$emit('input', val);}}},methods: {closeDialog () {this.visible = false;}}
};
</script><style scoped lang="scss">
.customer-dialog {width: var(--dialog-width);max-width: calc(100vw - 32px);max-height: var(--dialog-max-height);color: rgba(0, 0, 0, 0.88);line-height: 1.5714285714285714;list-style: none;margin: 0 auto;position: fixed;top: var(--dialog-top);left: var(--dialog-left);transform: translate(-50%, -50%);overflow: auto;margin: 0;box-sizing: border-box;background-color: #ffffff;background-clip: padding-box;border: 0;border-radius: 8px;box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08),0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05);pointer-events: auto;z-index: var(--dialog-z-index);// overflow-y: auto;
}.dialog-container {width: 100%;background: white;border-radius: 5px;display: flex;flex-direction: column;justify-content: space-between;.dialog-header {width: 100%;background: rgba(0, 0, 0, 0.5);background-color: rgba(230, 233, 240, 0.15);border-bottom: 1px #e6e9f0 solid;padding: 10px 0;.dialog__title {font-weight: bold;display: block;font-size: 1rem;font-weight: bold;height: 32px;line-height: 32px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-left: 15px;}.dialog__header-close {position: absolute;top: 10px;right: 10px;padding: 5px;background: transparent;border: none;outline: none;cursor: pointer;font-size: 16px;&:hover {font-size: 16px;font-weight: bold;color: rgba(0, 0, 0, 0.88);background-color: rgba(0, 0, 0, 0.06);transition: all 0.3s;}}}.dialog-body {box-sizing: border-box;font-size: 14px;line-height: 1.5714285714285714;word-wrap: break-word;flex: 1;overflow: auto;padding: 0 20px;position: relative;}
}.dialog-header,
.dialog-body,
.dialog-footer {text-align: var(--dialog-center);margin-bottom: 10px;
}
.dialog-footer {display: flex;justify-content: var(--dialog-center);align-items: center;padding: 0 10px;
}
.footer-title {margin-right: 10px;
}
</style>

二、实现拖动自定义指令

/** @Description:拖拽指令* @Author: rjl* @Date: 2024-07-10 18:03:37* @LastEditTime: 2024-07-16 20:34:54* @LastEditors: Ran junlin*/
/*** 可拖动弹窗* @description 使用 v-dialogDrag 调用指令；*/import { nextTick } from 'vue';
export default {bind (el, binding) {nextTick(() => {const { arg } = binding;console.log(arg,'arg');if (!arg) return;const dialogHeaderEl = document.querySelector('.dialog-header');const dragDom = document.querySelector('.customer-dialog');if (!dialogHeaderEl || !dragDom) {return console.log('dom不存在');}dialogHeaderEl.style.cursor = 'move';// 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty =dragDom.currentStyle || window.getComputedStyle(dragDom, null);dialogHeaderEl.onmousedown = e => {// 鼠标按下，计算当前元素距离可视区的距离const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;// 获取到的值带px 正则匹配替换let styL, styT;// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (sty.left.includes('%')) {styL =+document.body.clientWidth *(+sty.left.replace(/\%/g, '') / 100);styT =+document.body.clientHeight *(+sty.top.replace(/\%/g, '') / 100);} else {styL = +sty.left.replace(/\px/g, '');styT = +sty.top.replace(/\px/g, '');}document.onmousemove = function (e) {// 通过事件委托，计算移动的距离const l = e.clientX - disX;const t = e.clientY - disY;// 移动当前元素dragDom.style.left = `${l + styL}px`;dragDom.style.top = `${t + styT}px`;//将此时的位置传出去//binding.value({x:e.pageX,y:e.pageY})};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};};});}
};

三、使用

<ModaldialogDragv-model="dialogVisible"width="550px":left="790":top="240"title="区域查车"
><div class="body"><RTableref="table"v-loading="pending"border:tableData="tableData"row-key="id"size="small"stripewidth="100%"height="100%":column="columns"/></div>
</Modal>