VUE可随意拖动的弹窗组件 - DarkFeng - 博客园

安宇雨 - 随手采集
2020-03-16 22:00:28
随手采集
0000-未整理-等待研究

　　背景：项目需要，我们引入了前端框架就是目前最流行的框架之一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>