当前位置:Gxlcms > JavaScript > VUE实现可随意拖动的弹窗组件

VUE实现可随意拖动的弹窗组件

时间:2021-07-01 10:21:17 帮助过:4人阅读

背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。

由于不是很难,就不做过多解释了,直接上代码:

  1. <template>
  2. <el-container v-bind:id="id"
  3. v-if="dialogVisible">
  4. <el-header>
  5. <div @mousedown="mousedown">
  6. <h2 v-html="title"></h2>
  7. <div @click.stop="closeDialog()" style="position: absolute;top: 0px; right: 20px;">
  8. <span>
  9. <svg class="icon" aria-hidden="false">
  10. <use xlink:href='#el-icon-ext-close'></use>
  11. </svg>
  12. </span>
  13. </div>
  14. </div>
  15. </el-header>
  16. <el-main>
  17. <slot>这里是内容</slot>
  18. </el-main>
  19. <el-footer>
  20. <span class="dialog-footer">
  21. <el-button @click="closeDialog">取 消</el-button>
  22. <el-button type="primary" @click="closeDialog">确 定</el-button>
  23. </span>
  24. </el-footer>
  25. </el-container>
  26. </template>
  27. <script>
  28. export default {
  29. name: 'Window',
  30. props: {
  31. titlex: String,
  32. id: [String, Number]
  33. },
  34. data() {
  35. return {
  36. title: '标题',
  37. selectElement: ''
  38. }
  39. },
  40. computed: {
  41. dialogVisible: {
  42. get: function () {
  43. return this.$store.state.dialogVisible
  44. },
  45. set: function (newValue) {
  46. this.$store.commit('newDialogVisible', newValue)
  47. }
  48. }
  49. },
  50. methods: {
  51. closeDialog(e) {
  52. this.dialogVisible = false
  53. // alert(this.dialogVisible)
  54. this.$store.commit('newDialogVisible', false)
  55. },
  56. mousedown(event) {
  57. this.selectElement = document.getElementById(this.id)
  58. var div1 = this.selectElement
  59. this.selectElement.style.cursor = 'move'
  60. this.isDowm = true
  61. var distanceX = event.clientX - this.selectElement.offsetLeft
  62. var distanceY = event.clientY - this.selectElement.offsetTop
  63. // alert(distanceX)
  64. // alert(distanceY)
  65. console.log(distanceX)
  66. console.log(distanceY)
  67. document.onmousemove = function (ev) {
  68. var oevent = ev || event
  69. div1.style.left = oevent.clientX - distanceX + 'px'
  70. div1.style.top = oevent.clientY - distanceY + 'px'
  71. }
  72. document.onmouseup = function () {
  73. document.onmousemove = null
  74. document.onmouseup = null
  75. div1.style.cursor = 'default'
  76. }
  77. }
  78. }
  79. }
  80. </script>
  81. <style scoped>
  82. .el-container {
  83. position: absolute;
  84. height: 500px;
  85. width: 500px;
  86. border: 1px;
  87. top: 20%;
  88. left: 35%;
  89. border-radius: 2px;
  90. }
  91. .dialog-footer {
  92. text-align: right;
  93. }
  94. .el-main {
  95. background-color: white;
  96. }
  97. .el-footer {
  98. background-color: white;
  99. }
  100. .el-header {
  101. background-color: white;
  102. color: #333;
  103. line-height: 60px;
  104. }
  105. .el-aside {
  106. color: #333;
  107. }
  108. </style>

备注:解决了鼠标拖动过快移除窗口后终端问题,其它优点请自测,如有问题请留言!

以上这篇VUE实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

人气教程排行