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 相关文章推荐
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
Jan 26 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Vuex之理解Getters的用法实例
Apr 19 Javascript
Node.js使用gm拼装sprite图片
Jul 04 Javascript
vue.js删除列表中的一行
Jun 30 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
Aug 10 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
JS写滑稽笑脸运动效果
May 28 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和ACCESS写聊天室(八)
2006/10/09 PHP
php无限遍历目录示例
2014/02/21 PHP
Thinkphp实现MySQL读写分离操作示例
2014/06/25 PHP
PHP移动文件指针ftell()、fseek()、rewind()函数总结
2014/11/18 PHP
PHP实现二叉树的深度优先与广度优先遍历方法
2015/09/28 PHP
WordPress中调试缩略图的相关PHP函数使用解析
2016/01/07 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php正则表达式基本知识与应用详解【经典教程】
2017/04/17 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
2015/06/03 Javascript
js防阻塞加载的实现方法
2016/09/09 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
用ES6写全屏滚动插件的示例代码
2018/05/02 Javascript
JavaScript模板引擎应用场景及实现原理详解
2018/12/14 Javascript
Vue infinite update loop的问题解决
2019/04/23 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python开发中range()函数用法实例分析
2015/11/12 Python
Python自定义类的数组排序实现代码
2016/08/28 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
python 两个一样的字符串用==结果为false问题的解决
2020/03/12 Python
使用C#编写创建一个线程的代码
2013/01/22 面试题
新闻专业应届生求职信
2013/10/31 职场文书
周年庆促销方案
2014/03/15 职场文书
绿色环保演讲稿
2014/05/10 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
团员个人总结
2015/02/26 职场文书
医生行业员工的辞职信
2019/06/24 职场文书
JS实现数组去重的11种方法总结
2022/04/04 Javascript
vue里使用create, mounted调用方法
2022/04/26 Vue.js