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 ul标签下拉菜单演示代码
Dec 11 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 Javascript
js调用css属性写法
Sep 21 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQuery原生的动画效果
Jul 10 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
Oct 14 Javascript
jQuery实现动态显示select下拉列表数据的方法
Feb 05 jQuery
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
JavaScript 处理树数据结构的方法示例
Jun 16 Javascript
JavaScript实现Excel表格效果
Feb 07 Javascript
JS实现购物车基本功能
Nov 08 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基础知识:控制结构
2006/12/13 PHP
PHP获取网卡地址的代码
2008/04/09 PHP
php 文件缓存函数
2011/10/08 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
php实现微信模拟登陆、获取用户列表及群发消息功能示例
2017/06/28 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
封装的原生javascript弹出层代码
2010/09/24 Javascript
学习面向对象之面向对象的术语
2010/11/30 Javascript
基于jquery的获取浏览器窗口大小的代码
2011/03/28 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
2014/03/20 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
你可能不知道的JSON.stringify()详解
2017/08/17 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
微信小程序实现topBar底部选择栏效果
2018/07/20 Javascript
浅谈目前可以使用ES10的5个新特性
2019/06/25 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
CentOS中使用virtualenv搭建python3环境
2015/06/08 Python
Python自动发邮件脚本
2017/03/31 Python
python决策树之CART分类回归树详解
2017/12/20 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
Python Subprocess模块原理及实例
2019/08/26 Python
Django app配置多个数据库代码实例
2019/12/17 Python
tensorflow实现测试时读取任意指定的check point的网络参数
2020/01/21 Python
pytorch中index_select()的用法详解
2021/01/06 Python
新英格兰最大的特色礼品连锁店:The Paper Store
2018/07/23 全球购物
客户代表实习人员自我鉴定
2013/09/27 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
婚宴父母致辞
2015/07/27 职场文书
Python语言内置数据类型
2022/02/24 Python