调试了好久,还能凑合用,请直接看DOME示例,复制就能用:
<!DOCTYPEhtml>
<htmllang="zh">
<head>
<metacharset="UTF-8">
<title>Title</title>
<!--importCSS-->
<linkrel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<stylemedia="screen"type="text/css">
#appLoading{
width:100%;
height:100%;
}
#appLoadingspan{
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>
<divid="appLoading">
<span>Loading...</span>
</div>
<divid="app"style="display:none">
<el-dialogtitle="提示"width="50%":visible.sync="startUsingDialog"v-dialog_drag>
<span>您是否确定启用次记录?</span>
<spanslot="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>
<!--importVuebeforeElement-->
<scriptsrc="https://unpkg.com/vue/dist/vue.js"></script>
<!--importJavaScript-->
<scriptsrc="https://unpkg.com/element-ui/lib/index.js"></script>
<!--importjquery-->
<scriptsrc="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(function(){
$("body").on("mousedown",'.el-message-box__header',(e)=>{
constdialogHeaderEl=document.querySelector('.el-message-box__header')
constdragDom=document.querySelector('.el-message-box')
dialogHeaderEl.style.cursor='move'
//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);
conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null)
//鼠标按下，计算当前元素距离可视区的距离
constdisX=e.clientX-dialogHeaderEl.offsetLeft
constdisY=e.clientY-dialogHeaderEl.offsetTop
//获取到的值带px正则匹配替换
letstyL,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{
letlefts=sty.left
lettops=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){
//通过事件委托，计算移动的距离
constl=e.clientX-disX
constt=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){
constdialogHeaderEl=el.querySelector('.el-dialog__header')
constdragDom=el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor='move'
//获取原有属性iedom元素.currentStyle火狐谷歌window.getComputedStyle(dom元素,null);
conststy=dragDom.currentStyle||window.getComputedStyle(dragDom,null)
dialogHeaderEl.onmousedown=(e)=>{
console.log(1);
//鼠标按下，计算当前元素距离可视区的距离
constdisX=e.clientX-dialogHeaderEl.offsetLeft
constdisY=e.clientY-dialogHeaderEl.offsetTop
//获取到的值带px正则匹配替换
letstyL,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{
letlefts=sty.left
lettops=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){
//通过事件委托，计算移动的距离
constl=e.clientX-disX
constt=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
}
}
}
})
newVue({
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>
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jQuery