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 相关文章推荐
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
javascript 读取图片文件的大小
Jun 25 Javascript
jquery实现表格本地排序的方法
Mar 11 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
angularjs select 赋值 ng-options配置方法
Feb 28 Javascript
微信小程序文章详情页面实现代码
Sep 10 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
jquery+ajax实现异步上传文件显示进度条
Aug 17 jQuery
vue+spring boot实现校验码功能
May 27 Vue.js
JavaScript利用html5新方法操作元素类名详解
Nov 27 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
PHP中MVC模式的模板引擎开发经验分享
2011/03/23 PHP
PHP array_multisort() 函数的深入解析
2013/06/20 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
ThinkPHP中的create方法与自动令牌验证实例教程
2014/08/22 PHP
详解PHP中instanceof关键字及instanceof关键字有什么作用
2015/11/05 PHP
js脚本学习 比较实用的基础
2006/09/07 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
java和javascript获取word文档的书签位置对比
2014/06/19 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
2016/09/13 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
详解Vue爬坑之vuex初识
2017/06/14 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
浅谈react+es6+webpack的基础配置
2017/08/09 Javascript
小程序点击图片实现自动播放视频
2020/05/29 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
js实现的在本地预览图片功能示例
2019/11/09 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
Python使用py2exe打包程序介绍
2014/11/20 Python
python使用socket远程连接错误处理方法
2015/04/29 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
基于python中theano库的线性回归
2018/08/31 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Python使用Opencv实现图像特征检测与匹配的方法
2019/10/30 Python
python 实现有道翻译功能
2021/02/26 Python
天巡全球:Skyscanner Global
2017/06/20 全球购物
办公室年终个人自我评价
2013/10/28 职场文书
企业军训感言
2014/02/08 职场文书
学校百日安全生产活动总结
2014/07/05 职场文书
幼儿园家长安全责任书
2014/07/22 职场文书
信仰心得体会
2014/09/05 职场文书
工厂清洁工岗位职责
2015/02/14 职场文书
周恩来的四个昼夜观后感
2015/06/03 职场文书