VUE实现可随意拖动的弹窗组件
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。
由于不是很难,就不做过多解释了,直接上代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 | <template> <el-container v-bind:id= "id" v- if = "dialogVisible" > <el-header> <div @mousedown= "mousedown" > <h2 v-html= "title" ></h2> <div @click.stop= "closeDialog()" style= "position: absolute;top: 0px; right: 20px;" > <span> <svg class= "icon" aria-hidden= "false" > <use xlink:href= '#el-icon-ext-close' ></use> </svg> </span> </div> </div> </el-header> <el-main> <slot>这里是内容</slot> </el-main> <el-footer> <span class= "dialog-footer" > <el-button @click= "closeDialog" >取 消</el-button> <el-button type= "primary" @click= "closeDialog" >确 定</el-button> </span> </el-footer> </el-container> </template> <script> export default { name: 'Window' , props: { titlex: String, id: [String, Number] }, data() { return { title: '标题' , selectElement: '' } }, computed: { dialogVisible: { get: function () { return this .$store.state.dialogVisible }, set: function (newValue) { this .$store.commit( 'newDialogVisible' , newValue) } } }, methods: { closeDialog(e) { this .dialogVisible = false // alert(this.dialogVisible) this .$store.commit( 'newDialogVisible' , false ) }, mousedown(event) { this .selectElement = document.getElementById( this .id) var div1 = this .selectElement this .selectElement.style.cursor = 'move' this .isDowm = true var distanceX = event.clientX - this .selectElement.offsetLeft var distanceY = event.clientY - this .selectElement.offsetTop // alert(distanceX) // alert(distanceY) console.log(distanceX) console.log(distanceY) document.onmousemove = function (ev) { var oevent = ev || event div1.style.left = oevent.clientX - distanceX + 'px' div1.style.top = oevent.clientY - distanceY + 'px' } document.onmouseup = function () { document.onmousemove = null document.onmouseup = null div1.style.cursor = 'default' } } } } </script> <style scoped> .el-container { position: absolute; height: 500px; width: 500px; border: 1px; top: 20%; left: 35%; border-radius: 2px; } .dialog-footer { text-align: right; } .el-main { background-color: white; } .el-footer { background-color: white; } .el-header { background-color: white; color: #333; line-height: 60px; } .el-aside { color: #333; } </style> |
备注:解决了鼠标拖动过快移除窗口后终端问题,其它优点请自测,如有问题请留言!
以上这篇VUE实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
Vue计算属性computed与方法methods的区别及说明
这篇文章主要介绍了Vue计算属性computed与方法methods的区别及说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08通过debug搞清楚.vue文件如何变成.js文件(案例详解)
这篇文章主要介绍了通过debug搞清楚.vue文件如何变成.js文件,本文以@vitejs/plugin-vue举例,通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的,需要的朋友可以参考下2024-07-07
最新评论