调试了好久, 还能凑合用, 请直接看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>
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,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！
© 版权声明
THE END
暂无评论内容