赠送qq,夜店女生头像,宝贝鱼站长
背景:项目需要,我们引入了前端框架就是目前最流行的框架之一vue,同时引入了一套由饿了吗维护的ui库,由于我们是在pc端使用发现它竟然没有提供可随意拖动的窗口,可能用的更多的时移动端吧吧,于是就随手写了一个,比较简单吧,但是做过的就会知道也是有一些小小的技巧,记录下吧留作备用。
由于不是很难,就不做过多解释了,直接上代码:
<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实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论