elementui移动dialog
2024-09-27 19:49:19
1、在创建Vue对象时添加全局属性
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
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% 移动之后赋值为px
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 // 移动当前元素
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
}
}
}
})
2、在使用elementui的Dialog时,添加dialogDrag属性,注意,这个dialogDrag与上面所创建的名称一致
最新文章
- 【记录】ASP.NET MVC AuthorizeAttribute OnAuthorization 验证跳转
- Windows-mysql5.7安装
- ORACLE清除某一字段重复的数据(选取重复数据中另一个字段时期最大值)
- WordPress主题制作教程5:循环
- VS2012与NUnit
- 修正 phpcmsv9 VIP过期日期为1970
- 提取图像(tif)中水体的矢量数据(shp)研究
- 简单的实现QQ通信功能(二)
- mybatis数据库数据分页问题
- 北邮iptv用WindowsMediaplayer打不开的解决的方法
- 【渗透笔记】友情检测朋友公司并拿下shell过程
- 怎样看Mac的日志
- 安装numpy&;pandas
- DevExpress破解和消除弹出框问题
- VC++中LogFont设置字体(转)
- css文字效果(文字剪贴蒙版,text-shodow的应用,文字排版等…)
- 从ext4将mysql数据目录移动至lustre出现(InnoDB: Unable to lock ./ibdata1, error: 38.)
- 3D Render
- setnx redis
- x64dbg使用心得