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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JavaScript类库D
Oct 24 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
原生JavaScript+LESS实现瀑布流
Dec 12 Javascript
Node.js开源应用框架HapiJS介绍
Jan 14 Javascript
深入理解JavaScript系列(17):面向对象编程之概论详细介绍
Mar 04 Javascript
四种参数传递的形式——URL,超链接,js,form表单
Jul 24 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
jquery的checkbox,radio,select等方法小结
Aug 30 Javascript
Bootstrap源码解读表单(2)
Dec 22 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
React实现动效弹窗组件
Jun 21 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
玩转虚拟域名◎+ .
2006/10/09 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP中文件读、写、删的操作(PHP中对文件和目录操作)
2012/03/06 PHP
浅谈PHP中的错误处理和异常处理
2017/02/04 PHP
详解提高使用Java反射的效率方法
2019/04/29 PHP
jquery parent和parents的区别分析
2013/10/02 Javascript
详解jQuery插件开发中的extend方法
2013/11/19 Javascript
jQuery动态星级评分效果实现方法
2015/08/06 Javascript
有关json_decode乱码及NULL的问题
2015/10/13 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
2016/10/28 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
在ABP框架中使用BootstrapTable组件的方法
2017/07/31 Javascript
jq源码解析之绑在$,jQuery上面的方法(实例讲解)
2017/10/13 jQuery
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
JS简单实现点击跳转登陆邮箱功能的方法
2017/10/31 Javascript
JS 中document.write()的用法和清空的原因浅析
2017/12/04 Javascript
详解vue中axios的封装
2018/07/18 Javascript
简单了解小程序+node梳理登陆流程
2019/06/24 Javascript
JQuery中的常用事件、对象属性与使用方法分析
2019/12/23 jQuery
Javascript原型链及instanceof原理详解
2020/05/25 Javascript
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
使用Python微信库itchat获得好友和群组已撤回的消息
2018/06/24 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
Python爬虫 urllib2的使用方法详解
2019/09/23 Python
在Pytorch中计算自己模型的FLOPs方式
2019/12/30 Python
Python实现自动签到脚本功能
2020/08/20 Python
python3爬虫中引用Queue的实例讲解
2020/11/24 Python
全球游戏Keys和卡片市场:GamesDeal
2018/03/28 全球购物
西安当代医院管理研究院笔试题
2015/12/11 面试题
党日活动总结
2014/05/07 职场文书
群众路线个人剖析材料
2014/10/07 职场文书
红十字会救护培训简讯
2015/07/20 职场文书
各国货币符号大全
2022/02/17 杂记
剑指Offer之Java算法习题精讲二叉树的构造和遍历
2022/03/21 Java/Android