elementUI vue this.$confirm 和el-dialog 弹出框 移动
程序员文章站
2022-04-29 18:49:42
elementUI vue this.$confirm 和el-dialog 弹出框 移动 ......
调试了好久, 还能凑合用, 请直接看dome 示例,复制就能用:
<!doctype html> <html lang="zh"> <head> <meta charset="utf-8"> <title>title</title> <!-- import css --> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style media="screen" type="text/css"> #apploading { width: 100%; height: 100%; } #apploading span { position: absolute; display: block; font-size: 50px; line-height: 50px; top: 50%; left: 50%; width: 200px; height: 100px; -webkit-transform: translatey(-50%) translatex(-50%); transform: translatey(-50%) translatex(-50%); } </style> </head> <body> <div id="apploading"> <span>loading...</span> </div> <div id="app" style="display: none"> <el-dialog title="提示" width="50%" :visible.sync="startusingdialog" v-dialog_drag> <span> 您是否确定启用次记录?</span> <span slot="footer" class="dialog-footer"> <el-button @click="startusingsubmit()" type="danger" :loading="startusingloading">启用</el-button> <el-button @click="startusingdiglog=false">取消</el-button> </span> </el-dialog> </div> <!-- import vue before element --> <script src="https://unpkg.com/vue/dist/vue.js"></script> <!-- import javascript --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- import jquery --> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(function () { $("body").on("mousedown", '.el-message-box__header', (e) => { const dialogheaderel = document.queryselector('.el-message-box__header') const dragdom = document.queryselector('.el-message-box') dialogheaderel.style.cursor = 'move' // 获取原有属性 ie dom元素.currentstyle 火狐谷歌 window.getcomputedstyle(dom元素, null); const sty = dragdom.currentstyle || window.getcomputedstyle(dragdom, null) // 鼠标按下,计算当前元素距离可视区的距离 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 { let lefts = sty.left let tops = sty.top if (sty.left == 'auto') { lefts = '0px' } if (sty.top == 'auto') { tops = '0px' } styl = +lefts.replace(/\px/g, '') styt = +tops.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` dragdom.style.position = `absolute` // 将此时的位置传出去 // binding.value({x:e.pagex,y:e.pagey}) } document.onmouseup = function (e) { document.onmousemove = null document.onmouseup = null } }) }) vue.directive('dialog_drag', { 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) => { console.log(1); // 鼠标按下,计算当前元素距离可视区的距离 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 { let lefts = sty.left let tops = sty.top if (sty.left == 'auto') { lefts = '0px' } if (sty.top == 'auto') { tops = '0px' } styl = +lefts.replace(/\px/g, '') styt = +tops.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 } } } }) new vue({ el: '#app', data: function () { return { startusingdialog: true, startusingloading: false, } }, //页面加载成功时完成 mounted() { document.getelementbyid('app').style.display = 'block'; document.getelementbyid('apploading').style.display = 'none'; }, //方法 methods: { startusingsubmit() { this.startusingloading=true this.$confirm("提示", "你好!", { confirmbuttontext: '确定', cancelbuttontext: '取消' }).then(()=>{ this.startusingloading=false }) this.$message({ showclose: true, message: '这是一条消息提示', duration: 0 //表示显示几秒, 0 表示不消失 }); } }, }) </script> </body> </html>