项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。
<强>由于不是很难,就不做过多解释了,直接上代码:
& lt; template>
& lt; el-container v-bind: id=" id "
v=癲ialogVisible”比;
& lt; el-header>
& lt; div @mousedown=癿ousedown”比;
& lt; h3 v-html="标题"祝辞& lt;/h3>
& lt; div @click.stop=" closeDialog ()比;
& lt; span>
& lt; svg类="偶像" aria-hidden=癴alse”比;
& lt;使用xlink: href=' https://www.yisu.com/zixun/el-icon-ext-close的祝辞& lt;/用gt;
& lt;/svg>
& lt;/span>
& lt;/div>
& lt;/div>
& lt;/el-header>
& lt; el-main>
& lt; slot>这里是内容& lt;/slot>
& lt;/el-main>
& lt; el-footer>
& lt;跨类=癲ialog-footer”比;
& lt; el-button @click=" closeDialog "祝辞取消& lt;/el-button>
& lt; el-button类型=爸鳌盄click=癱loseDialog祝辞确定& lt;/el-button>
& lt;/span>
& lt;/el-footer>
& lt;/el-container>
& lt;/template>
& lt; script>
出口默认{
名称:“窗口”,
道具:{
titlex:字符串,
id(字符串、数字):
},
数据(){
返回{
标题:“标题”,
selectElement:“
}
},
计算:{
dialogVisible: {
得到:函数(){
返回这个。store.state.dialogVisible美元
},
设置:函数(newValue) {
美元。store.commit (newDialogVisible, newValue)
}
}
},
方法:{
closeDialog (e) {
这一点。dialogVisible=false//警报(this.dialogVisible)
美元。store.commit (newDialogVisible,假)
},
mousedown(事件){
这一点。selectElement=. getelementbyid (this.id)
var div1=this.selectElement
this.selectElement.style。光标='移动'
这一点。isDowm=true
var distanceX=事件。clientX——this.selectElement.offsetLeft
var distanceY=事件。clientY——this.selectElement.offsetTop//警报(distanceX)//警报(distanceY)
console.log (distanceX)
console.log (distanceY)
文档。onmousemove=function (ev) {
var oevent=ev | |事件
div1.style。左=oevent。clientX - distanceX +“px”
div1.style。=oevent。clientY - distanceY +“px”
}
文档。onmouseup=function () {
文档。onmousemove=零
文档。onmouseup=零
div1.style。光标=澳稀?
}
}
}
}
& lt;/script>
& lt; scoped>风格;
.el-container {
位置:绝对的;
身高:500 px;
宽度:500 px;
边界:1 px;
上图:20%;
左:35%;
border - radius: 2 px;
}
.dialog-footer {
text-align:正确;
}
.el-main {
背景颜色:白色;
}
.el-footer {
背景颜色:白色;
}
.el-header {
背景颜色:白色;
颜色:# 333;
行高:60 px;
}
.el-aside {
颜色:# 333;
}
& lt;/style>
解决了鼠标拖动过快移除窗口后终端问题,其它优点请自测,如有问题请留言!
以上这篇VUE实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
