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


Posted in Javascript onSeptember 25, 2018

背景:项目需要,我们引入了前端框架就是目前最流行的框架之一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实现可随意拖动的弹窗组件就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript各浏览器中option元素的表现差异
Apr 07 Javascript
jquery的父子兄弟节点查找示例代码
Mar 03 Javascript
Javascript中innerHTML用法实例分析
Jan 12 Javascript
js实现宇宙星空背景效果的方法
Mar 03 Javascript
jQuery实现为图片添加镜头放大效果的方法
Jun 25 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
AngularJS 过滤器的简单实例
Jul 27 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 Javascript
浅谈用Webpack路径压缩图片上传尺寸获取的问题
Feb 22 Javascript
js纯前端实现腾讯cos文件上传功能的示例代码
May 14 Javascript
vue移动端弹框组件的实例
Sep 25 #Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 #Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 #Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 #Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 #Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
Sep 25 #Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 #Javascript
You might like
php加速器eAccelerator的配置参数、API详解
2014/05/05 PHP
PHP执行Curl时报错提示CURL ERROR: Recv failure: Connection reset by peer的解决方法
2014/06/26 PHP
PHP基于imap获取邮件实例
2014/11/11 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
深入理解PHP内核(一)
2015/11/10 PHP
php7下的filesize函数
2019/09/30 PHP
javascript 写类方式之十
2009/07/05 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
2016/05/19 Javascript
jQuery EasyUI Tab 选项卡问题小结
2016/08/16 Javascript
js实现表格筛选功能
2017/01/18 Javascript
详谈vue+webpack解决css引用图片打包后找不到资源文件的问题
2018/03/06 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
javascript实现多边形碰撞检测
2020/10/24 Javascript
[37:21]完美世界DOTA2联赛PWL S2 Inki vs Magma 第二场 11.22
2020/11/24 DOTA
Python中__init__和__new__的区别详解
2014/07/09 Python
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Python中List.count()方法的使用教程
2015/05/20 Python
flask框架实现连接sqlite3数据库的方法分析
2018/07/16 Python
python selenium登录豆瓣网过程解析
2019/08/10 Python
python argparser的具体使用
2019/11/10 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
全球速卖通:AliExpress(国际版淘宝)
2017/09/20 全球购物
应届生自我鉴定
2013/12/11 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
法人委托书范本
2014/09/15 职场文书
教师拔河比赛广播稿
2014/10/14 职场文书
优秀团员事迹材料
2014/12/25 职场文书
公务员政审个人总结
2015/02/12 职场文书
家长会开场白和结束语
2015/05/29 职场文书
焦裕禄观后感
2015/06/03 职场文书
Vue Element UI自定义描述列表组件
2021/05/18 Vue.js