最近同事封装了一个可以拖动的弹窗，效果图如下：


下面将代码附录如下：希望以后可以达到自行封装代码的程度：

感觉同事的代码跟大神https://www.cnblogs.com/mankii/p/13970970.html 的代码一致，大神就是大神，超级厉害！！！

1.封装拖动弹窗组件——index.vue

1.1html部分代码

<template>
	<a-modal :class="[modalClass,simpleClass]" :visible="visible" v-bind="$props" :footer="footer" :bodyStyle="{padding:0}" @ok="handleOk" @cancel="handleCancel">
		<div class="ant-modal-body" :style="bodyStyle">
			<slot></slot>
		</div>
		<div class="ant-modal-footer relative" v-if="footer==null">
			<slot name="footer"></slot>
		</div>
		<div v-if="!title&&title!==''" slot="title">
			<slot name="title"></slot>
		</div>
	</a-modal>
</template>

1.2 js部分代码

<script>
import props from './props.js'
var mouseDownX = 0
var mouseDownY = 0
var deltaX = 0
var deltaY = 0
var sumX = 0
var sumY = 0
var header = null
var contain = null
var modalContent = null
var onmousedown = false
export default {
	name:'DragModal',
	mixins:[props],
	props:{
		//容器的类名
		modalClass:{
			type:String,
			default:()=>{
				return 'modal-box'	
			}
		},
		visible:{
			type:Boolean,
			default:()=>{
				return false	
			}	
		},
		title:{
			type:String,
			default:()=>{
				return undefined
			}	
		},
		width:{
			type:[String,Number],
			default:()=>{
				return '50%'	
			}
		},
		footer:{
			type:Boolean,
			default:()=>{
				return undefined
			}
		}
	},
	data(){
		return{}
	},
	computed:{
		simpleClass(){
			return Math.random().toString(36).substring(2)	
		}
	},
	watch:{
		visible(){
			this.$nextTick(()=>{
				this.initialEvent(this.visible)
			})
		}
	},
	mounted(){
		this.$nextTick(()=>{
			this.initialEvent(this.visible)
		})
	},
	created(){},
	beforeDestory(){
		this.removeMove();
		window.removeEventListener('mouseup',this.removeUp,false)
	},
	methods:{
		handleOk(e){
			this.resetNum()
			this.$emit('ok',e)
		},
		handleCancel(e){
			this.resetNum();
			this.$emit('cancel',e)
		},
		resetNum(){
			mouseDownX = 0
			mouseDownY = 0
			deltaX = 0
			deltaY = 0
			sumX = 0
			sumY = 0
		},
		handleMove(event){
			const delta1X = event.pageX - mouseDownX
			const delta1Y = event.pageY - mouseDownY
			deltaX = delta1X
			deltaY = delta1Y
			modalContent.style.transform = `translate(${delta1X+sumX}px,${deltaY+sumY}px)`
		},
		initialEvent(visible){
			if(visible){
				setTimeout(()=>{
					window.removeEventListener('mouseup',this.removeUp,false)
					contain = document.getElementsByClassName(this.simpleClass)[0]
					header = contain.getElementsByClassName('ant-modal-header')[0]
					modalContent = contain.getElementsByClassName('ant-modal-content')[0]
					modalContent.style.left = 0
					modalContent.style.transform = 'translate(0px,0px)'
					header.style.cursor = 'all-scroll'
					header.onmousedown=(e)=>{
						onmousedown = true
						mouseDownX = e.pageX
						mouseDownY = e.pageY
						document.body.onselectstart = ()=>false
						window.addEventListener('mousemove',this.handleMove,false)
					}
					window.addEventListener('mouseup',this.removeUp,false)
				},0)
			}
		},
		removeMove(){
			window.removeEventListener('mousemove',this.handleMove,false)
		},
		removeUp(e){
			document.body.onselectstart = ()=>true
			if(onmousedown&&!(e.pageX === mouseDownX&&e.pageY===mouseDownY)){
				onmousedown = false
				sumX = sumX + deltaX
				sumY = sumY + deltaY
			}
			this.removeMove();
		}
	}
}
</script>

2.封装拖动弹窗组件——props.js

export default{
	props:[
		'afterClose',//modal完全关闭后的回调
		'bodyStyle',//modal body 样式
		'cancelText',//取消按钮文字
		'centered',//垂直居中展示modal
		'closable',//是否显示右上角关闭按钮
		'closeIcon',//自定义关闭图标
		'confirmLoadng',//确定按钮loading
		'destroyOnClose',//关闭时销毁modal里的子元素
		'forceRender',//强制渲染modal
		'getContainer',//指定modal挂载的html节点
		'keyboard',//是否支持键盘的esc关闭
		'mask',//是否展示遮罩
		'maskClosable',//点击蒙层是否允许关闭
		'maskStyle',//遮罩样式
		'okText',//确认按钮文字
		'okType',//确定按钮类型
		'okButtonProps',//ok按钮props
		'cancelButtonProps',//cancel按钮props
		'title',//标题
		'visible',//对话框是否可见
		'width',//宽度
		'wrapClassName',//对话框外层容器的类名
		'zIndex',//设置modal的z-index
		'dialogStyle',//可用于设置浮层的样式，调整浮层位置等
		'dialogClass',//可用于设置浮层的类名
	]
}

3.挂载到main.js上

import DragModal from '@/components/dragModal'
Vue.component('DragModal',DragModal)

4.其他页面上的使用

<DragModal title="demo" :visible="visible" @ok="handleOk" @cancel="handleCancel">
	<div>123123</div>
</DragModal>