調試了好久, 還能湊合用, 請直接看DOME 示例,復制就能用:
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <title>Title</title> <!-- import CSS --> <link rel="stylesheet" > <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>
ps:下面看下vue-elementUI 彈出框
<div class="dial-header"> <el-dialog title="請選擇適配器" :visible.sync="showFlag" style="width:900px"> <div style="text-align: left; margin: 0;width:400px;" > <div class="adp" v-for="adapter in adapters" style="width:300px;height:30px;line-height:30px;border-top:none;margin:0px 0px 0px 40px"> <el-radio :label="adapter.ip" style="width:200px;padding-left:40px" v-model="radio"></el-radio> <div style="display: inline-block;width:30px"><img v-if="!adapter.val" src="../../static/images/grey.png"><img v-if="adapter.val" src="../../static/images/green.png"></div> </div> <div style="padding-top:20px;text-align: right"> <el-button type="text" size="small" @click="showFlag = false">取消</el-button> <el-button type="primary" size="small" @click="radioEvent()">確定</el-button> </div> </div> </el-dialog> <el-button type="primary" @click="showFlag = true">選擇</el-button> </div> <script> export default { data () { return { showFlag: false, radio:"" } }, methods:{ radioEvent(){ this.showFlag = false; this.adapterSelected = this.radio; }, } </script> 總結
以上所述是小編給大家介紹的elementUI vue this.$confirm 和el-dialog 彈出框 移動 示例demo,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
新聞熱點
疑難解答
