Shulou(Shulou.com)06/03 Report--

This article mainly shows you the "elementUI vue this.$confirm and el-dialog pop-up box movement example analysis", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn the "elementUI vue this.$confirm and el-dialog pop-up box movement example analysis" this article.

Code:

Title # 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%);} Loading... Are you sure you want to enable secondary recording? Enable cancel $(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' / / get the original attribute ie dom element. CurrentStyle Google window.getComputedStyle (dom element, null) Const sty = dragDom.currentStyle | | window.getComputedStyle (dragDom, null) / / Mouse Down Calculate the distance of the current element from the visual area const disX = e.clientX-dialogHeaderEl.offsetLeft const disY = e.clientY-dialogHeaderEl.offsetTop / / the value obtained with px canonical matching replacement let styL. StyT / / Note that the value obtained for the first time in ie is assigned to px if (sty.left.includes ('%')) {styL = + document.body.clientWidth * (+ sty.left.replace (/\% / g) after the component moves 50%. 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) {/ / delegate through event Calculate the distance of movement const l = e.clientX-disX const t = e.clientY-disY / / move the current element dragDom.style.left = `${l + styL} px` dragDom.style.top =` ${t + styT} px` dragDom.style.position = `roomte` / / send out the position at this time / / 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' / / get the original attribute ie dom element. CurrentStyle Google window.getComputedStyle (dom element, null) Const sty = dragDom.currentStyle | | window.getComputedStyle (dragDom, null) dialogHeaderEl.onmousedown = (e) = > {console.log (1) / / Mouse press Calculate the distance of the current element from the visual area const disX = e.clientX-dialogHeaderEl.offsetLeft const disY = e.clientY-dialogHeaderEl.offsetTop / / the value obtained with px canonical matching replacement let styL StyT / / Note the value obtained for the first time in ie is assigned to px if (sty.left.includes ('%')) {styL = + document.body.clientWidth * (+ sty.left.replace (/\% / g,'') / 100) styT = + document.body.clientHeight * (+ sty.top.replace (/\% / g) after 50% movement of the component. 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) {/ / delegate through event Calculate the distance of movement const l = e.clientX-disX const t = e.clientY-disY / / move the current element dragDom.style.left = `${l + styL} px` dragDom.style.top =` ${t + styT} px` / / send out the position at this time / / 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,}, / / complete mounted () {document.getElementById ('app'). Style.display =' block') when the page loads successfully Document.getElementById ('appLoading'). Style.display =' none' }, / / method methods: {startUsingSubmit () {this.startUsingLoading=true this.$confirm ("prompt", "Hello!", {confirmButtonText:'OK', cancelButtonText: 'cancel'}). Then (() = > {this.startUsingLoading=false}) this.$message ({showClose: true, message: 'this is a message prompt', duration: 0 / / indicates a few seconds of display 0 means it does not disappear}) }})

Ps: take a look at the vue-elementUI pop-up box

Deselect export default {data () {return {showFlag: false, radio: ""}}, methods: {radioEvent () {this.showFlag = false; this.adapterSelected = this.radio;},} all of the above are "sample analysis of elementUI vue this.$confirm and el-dialog pop-up box movements". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.