您正在使用IPV4(44.192.247.184)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头       悟空收录网      

【腾讯云】云服务器等爆品抢先购,低至4.2元/月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2023年 元宵节 4
2023年 情人节 13
2024年 元 旦 334
2024年 春 节 374
 
您现在的位置:首页 >> 脚本程序 >> 内容
本类新增
本类热门文章
element UI中el-dialog实现拖拽功能示例代码
内容摘要: elementUI中dialog组件经常会用到,如果能让其任意拖拽放到不同的位置就更好了,实现方法如下:dialogDraggable.js代码:importVuefrom'vue'//v-dialogDrag:弹窗拖拽Vue.directive('dialogDrag',{bind(el,binding,vnode,oldVnode){constdialo......
elementUI中dialog组件经常会用到,如果能让其任意拖拽放到不同的位置就更好了,实现方法如下:

dialogDraggable.js代码:

importVuefrom'vue'

//v-dialogDrag:弹窗拖拽

Vue.directive('dialogDrag',{

bind(el,binding,vnode,oldVnode){

constdialogHeaderEl=el.querySelector('.el-dialog__header')

constdragDom=el.querySelector('.el-dialog')

dialogHeaderEl.style.cursor='move'

//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);

conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null)

dialogHeaderEl.onmousedown=(e)=>{

//鼠标按下,计算当前元素距离可视区的距离

constdisX=e.clientX-dialogHeaderEl.offsetLeft

constdisY=e.clientY-dialogHeaderEl.offsetTop

//获取到的值带px正则匹配替换

letstyL,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){

//通过事件委托,计算移动的距离

constl=e.clientX-disX

constt=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

}

}

}

})

main.js引用:

1

import‘@/assets/dialogDraggable.js'

模块中引用

1

<el-dialogv-dialogDrag></el-dialog>

有几个点须要注意一下浏览器

每一个弹窗都要有惟一dom可操做指令能够作到

拖拽时要添加可拖拽区块header

因为element-uidialog组件在设计时宽度用了百分比,这里不一样浏览器有兼容性问题

实现拖拽宽高时获取边缘问题div定位设置模拟边缘

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:js导入导出excel 下一篇:CSS样式覆盖的操作代码
发布日期:2022/12/30
手机扫二维码直达本页
发布时间:11:41:59
点  击:17
录  入:齐天大圣
相关文章
Baidu

YiJiaCMS 6.3.5.220928(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2023