elelment弹框可以移动_elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo

调试了好久, 还能凑合用, 请直接看DOME 示例,复制就能用:

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...

您是否确定启用次记录?

启用

取消

$(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 表示不消失

});

}

},

})

ps:下面看下vue-elementUI 弹出框

取消

确定

选择

export default {

data () {

return {

showFlag: false,

radio:""

}

},

methods:{

radioEvent(){

this.showFlag = false;

this.adapterSelected = this.radio;

},

}

总结

以上所述是小编给大家介绍的elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！