1.首先在全局的组件实现拖拽功能，结构如下

dialogDrag.vue的内容

javascript"><script>export default {mounted() {// 获取当前的dialog及其headerlet aimDialog = this.$el.getElementsByClassName('el-dialog')[0];let aimHeader = this.$el.getElementsByClassName('el-dialog__header')[0];// 获取总的dialog_warpper列表let wrapperList = document.getElementsByClassName('el-dialog__wrapper');aimHeader.onmousedown = (e) => {// 用于存放当前dialog所对应的dialog_warpperlet aimWrap = "";for(let i=0; i<wrapperList.length; i++) {if(wrapperList[i].childNodes[0] == aimDialog) {aimWrap = wrapperList[i]}}// 存放dialog最终的left与top值let currentLeft = "";let currentTop = "";// 通过鼠标点击位置与起始offset位置，获取起始点击x，ylet x1 = e.clientX - aimWrap.offsetLeft;let y1 = e.clientY - aimWrap.offsetTop;document.onmousemove = (e) => {// 清除选中状态let selection = window.getSelection();selection.removeAllRanges();// 获取移动后的x，ycurrentLeft = e.clientX - x1;currentTop = e.clientY - y1;aimWrap.style.left = currentLeft + 'px';aimWrap.style.top = currentTop + 'px';}document.onmouseup = () => {let dialogLeft = aimDialog.offsetLeft;  // dialog距离dialog_wrap左侧距离let dialogTop = aimDialog.offsetTop;  // dialog距离dialog_wrap左侧距离// 当超出20px距离时回弹20px// 左侧超出if(currentLeft + dialogLeft + aimDialog.clientWidth < 20) {currentLeft = 20 - aimDialog.clientWidth - dialogLeft}// 顶部超出if(currentTop + dialogTop < 20) {currentTop = 20 - dialogTop}// 右侧超出if(currentLeft + dialogLeft > aimWrap.clientWidth - 20) {currentLeft = dialogLeft + aimDialog.clientWidth - 20}// 底部超出if(currentTop + dialogTop > aimWrap.clientHeight - 20) {currentTop =  aimWrap.clientHeight - dialogTop - 20}aimWrap.style.left = currentLeft + 'px';aimWrap.style.top = currentTop + 'px';document.onmousemove = null;document.onmouseup = null;}}}}
</script>
<style>.el-dialog__header {/* header颜色，下面是示例，可以忽略 *//* background-color: aqua; */}.el-dialog__wrapper {width: 100vw;height: 100vh;}
</style>

index.js文件

javascript">import dialogDragMixin from './dialogDrag'  
export function installDialog(Vue, Element) {Element.Dialog.methods.handleClose = function(){if(typeof this.beforeClose==='function'){this.beforeClose(this.hide);}else{this.hide();}// 关闭后重置dialog_warpper的position相关let aimDialog = this.$el.getElementsByClassName('el-dialog')[0];let wrapperList = document.getElementsByClassName('el-dialog__wrapper');let aimWrap = "";for(let i=0; i<wrapperList.length; i++) {if(wrapperList[i].childNodes[0] == aimDialog) {aimWrap = wrapperList[i]}}window.setTimeout(() => {if(aimWrap){aimWrap.style.left = 0;aimWrap.style.top = 0;}}, 500)}Element.Dialog.mixins.push(dialogDragMixin);  
}

在main.js里全局注册

javascript">import { installDialog } from "../src/components/common/dialog/index.js";installDialog(Vue, ElementUI)