- vue项目里面创建directive文件夹然后创建index.js和drag.js两个文件,然后写如下代码
- 在drag.js写如下代码
export default {
bind(el, binding, vnode, oldVnode) {
const value = binding.value
if (!value) return
const dialogHeaderEl = el.querySelector('.ant-modal-header')
const dragDom = el.querySelector('.ant-modal')
dialogHeaderEl.style.cursor = 'move'
dragDom.style.userSelect = 'none'
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)
dragDom.style.position = 'absolute'
dragDom.style.marginTop = 0
let width = dragDom.style.width
if (width.includes('%')) {
width = +document.body.clientWidth * (+width.replace(/\%/g, '') / 100)
} else {
width = +width.replace(/\px/g, '')
}
dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`
dialogHeaderEl.onmousedown = (e) => {
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop
let styL, styT
if (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
const boundaryWidth = document.body.clientWidth - width
const boundaryHeight = document.body.clientHeight - dragDom.clientHeight + 24
let finallyL = l + styL
let finallyT = t + styT
finallyL = finallyL <= 0 ? 0 : finallyL >= boundaryWidth ? boundaryWidth : finallyL
finallyT = finallyT <= 0 ? 0 : finallyT >= boundaryHeight ? boundaryHeight : finallyT
dragDom.style.left = `${finallyL}px`
dragDom.style.top = `${finallyT}px`
}
document.onmouseup = function (e) {
document.onmousemove = null
document.onmouseup = null
}
}
},
}
- index.js代码如下
import drag from '@/directive/drag'
const install = function (Vue) {
Vue.directive('drag', drag)
}
export default install
- 然后在main.js里面引入
import directive from '@/directive'
Vue.use(directive )
- 具体使用如下
<a-modal v-drag="true" v-bind="$attrs" v-on="$listeners" :title="$attrs.title" :visible="$attrs.showModal" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="handleCancel" ok-text="确定" cancel-text="取消" :maskClosable="false">
<a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
<a-form-model-item has-feedback label="姓名" prop="name">
<a-input v-model="ruleForm.name" type="text" autocomplete="off" placeholder="请输入姓名" />
</a-form-model-item>
<a-form-model-item has-feedback label="年龄" prop="age">
<a-input v-model.number="ruleForm.age" autocomplete="off" placeholder="请输入年龄" />
</a-form-model-item>
<a-form-model-item has-feedback label="地址" prop="address">
<a-input v-model="ruleForm.address" placeholder="请输入地址" />
</a-form-model-item>
</a-form-model>
</a-modal>