VUE可随意拖动的弹窗组件

最新推荐文章于 2025-07-16 14:54:54 发布

转载最新推荐文章于 2025-07-16 14:54:54 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/higiser/p/9340237.html

文章标签：

#javascript #ViewUI

为了解决Vue项目中缺少可自由拖动窗口的问题，本文介绍了一个简单的自定义Vue组件，该组件允许用户通过鼠标拖动调整窗口位置，并提供了关闭按钮及确认取消操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

　　背景：项目需要，我们引入了前端框架就是目前最流行的框架之一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 
 28 <script>
 29   export default {
 30     name: 'Window',
 31     props: {
 32       titlex: String,
 33       id: [String, Number]
 34     },
 35     data() {
 36       return {
 37         title: '标题',
 38         selectElement: ''
 39       }
 40     },
 41     computed: {
 42       dialogVisible: {
 43         get: function () {
 44           return this.$store.state.dialogVisible
 45         },
 46         set: function (newValue) {
 47           this.$store.commit('newDialogVisible', newValue)
 48         }
 49       }
 50     },
 51     methods: {
 52       closeDialog(e) {
 53         this.dialogVisible = false
 54         // alert(this.dialogVisible)
 55         this.$store.commit('newDialogVisible', false)
 56       },
 57       mousedown(event) {
 58         this.selectElement = document.getElementById(this.id)
 59         var div1 = this.selectElement
 60         this.selectElement.style.cursor = 'move'
 61         this.isDowm = true
 62         var distanceX = event.clientX - this.selectElement.offsetLeft
 63         var distanceY = event.clientY - this.selectElement.offsetTop
 64         // alert(distanceX)
 65         // alert(distanceY)
 66         console.log(distanceX)
 67         console.log(distanceY)
 68         document.onmousemove = function (ev) {
 69           var oevent = ev || event
 70           div1.style.left = oevent.clientX - distanceX + 'px'
 71           div1.style.top = oevent.clientY - distanceY + 'px'
 72         }
 73         document.onmouseup = function () {
 74           document.onmousemove = null
 75           document.onmouseup = null
 76           div1.style.cursor = 'default'
 77         }
 78       }
 79     }
 80   }
 81 </script>
 82 
 83 <style scoped>
 84   .el-container {
 85     position: absolute;
 86     height: 500px;
 87     width: 500px;
 88     border: 1px;
 89     top: 20%;
 90     left: 35%;
 91     border-radius: 2px;
 92   }
 93 
 94   .dialog-footer {
 95     text-align: right;
 96   }
 97 
 98   .el-main {
 99     background-color: white;
100   }
101 
102   .el-footer {
103     background-color: white;
104   }
105 
106   .el-header {
107     background-color: white;
108     color: #333;
109     line-height: 60px;
110   }
111 
112   .el-aside {
113     color: #333;
114   }
115 </style>