Vue. 之 Element dialog 拖拽

  默认情况下,在使用Element的Dialog模块时,弹出框是不能移动的,且 一旦点击遮罩层区域,弹框就会消失。

  解决方案:

  1 在 utils 中新建 directives.js 文件

import Vue from 'vue'

// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
bind(el, binding, vnode, oldVnode) {
const dialogHeaderEl = el.querySelector('.el-dialog__header')
const dragDom = el.querySelector('.el-dialog')
dialogHeaderEl.style.cursor = 'move' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null) dialogHeaderEl.onmousedown = (e) => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - dialogHeaderEl.offsetLeft
const disY = e.clientY - dialogHeaderEl.offsetTop // 获取到的值带px 正则匹配替换
let styL, styT // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)
styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)
} else {
styL = +sty.left.replace(/\px/g, '')
styT = +sty.top.replace(/\px/g, '')
} document.onmousemove = function(e) {
// 通过事件委托,计算移动的距离
const l = e.clientX - disX
const t = e.clientY - disY // 移动当前元素
dragDom.style.left = `${l + styL}px`
dragDom.style.top = `${t + styT}px` // 将此时的位置传出去
// binding.value({x:e.pageX,y:e.pageY})
} document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
}) // v-dialogDragWidth: 弹窗宽度拖大 拖小
Vue.directive('dialogDragWidth', {
bind(el, binding, vnode, oldVnode) {
const dragDom = binding.value.$el.querySelector('.el-dialog') el.onmousedown = (e) => {
// 鼠标按下,计算当前元素距离可视区的距离
const disX = e.clientX - el.offsetLeft document.onmousemove = function(e) {
e.preventDefault() // 移动时禁用默认事件 // 通过事件委托,计算移动的距离
const l = e.clientX - disX
dragDom.style.width = `${l}px`
} document.onmouseup = function(e) {
document.onmousemove = null
document.onmouseup = null
}
}
}
})

2. main.js中导入:import './utils/directives.js'

3. 使用 el-dialog 的地方加入 v-dialogDrag 

<el-dialog
title="添加新的变量"
:visible.sync="setAddDialogFormVisible"
width="35%"
v-dialogDrag>
</el-dialog>

Vue. 之 Element dialog 拖拽的更多相关文章

  1. vue简单的自由拖拽

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Vue实现拖拽穿梭框功能四种方式

    一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...

  3. Vue 表单拖拽排序

    Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...

  4. 自由拖拽DIV实现

    最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...

  5. HTML5文件拖拽

    HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...

  6. 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽

    前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...

  7. draggable()拖拽时限制移动区域

    jQuery-UI为我们提供了一个非常便捷的拖拽方法:draggable(),在使用此方法时,我们可能会希望控件只在某一区域中移动,不能被拖出边界,这样的话我们可以使用下面的方法: 调用draggab ...

  8. VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序

    Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...

  9. Vue+element 需要用到拖拽组件 vuedraggable

    新需求是要求界面上的14个可以拖拽,点击保存之后保存拖拽之后的顺序. 确定需求之后肯定第一时间是百度,发现有个插件vuedragger拖拽,按照教程就懵懂的开始了. 官方示例:https://davi ...

随机推荐

  1. vs2017 Visual Studio 离线安装方法

    转自:http://www.jb51.net/softjc/539858.html 第一部分:离线下载安装文件 这里描述是包括所有版本,截图以下载VS2017社区版为例: ①登入VS官网下载页面,选择 ...

  2. day 65 Django基础之django分页

      Django基础之django分页   一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpRespons ...

  3. 有关Tensorboard问题

    先说我的各个版本: 操作系统: win7 64 Python: 3.5 Tensorflow: 1.2 Tensorboard: 1.6 错误一: 只显示Graphs,不显示Histogram和Sca ...

  4. HYNB Round 15: PKU Campus 2019

    HYNB Round 15: PKU Campus 2019 C. Parade 题意 将平面上n*2个点安排在长度为n的两行上. 做法 首先可以忽略每个点之间的影响,只用考虑匹配即可 然后把所以点归 ...

  5. 大半宿,封装了一个MP3播放器的类,写了个简陋的播放器

    用 winmm.lib 写的 封装不是很好,而且没有优化,效率可能有问题,但是现在几乎没有什么大问题 我用我封装的类,写了一个小播放器,界面上的所有功能都实现了,包括双击列表中的文件名,直接播放文件 ...

  6. 13-5-let和()的作用域

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. spark 应用场景1-求年龄平均值

    原文引自:http://blog.csdn.net/fengzhimohan/article/details/78535143 该案例中,我们将假设我们需要统计一个 10 万人口的所有人的平均年龄,当 ...

  8. 帝国cms学习

    手册地址1 手册地址2 入门 安装: 将下载的upload里的文件上传到网站更目录 然后 域名/e/install/index.php Warning: Use of undefined consta ...

  9. 1 环境搭建_及参考资料介绍_ASM驱动开发疑难解决

    1 环境搭建 > 这里和  周壑老师不同:大家觉得哪中适合当前的物理机,就配置那种. 如下: win7 32 位: vs 2010; visualDDk 驱动项目插件: V A --- 代码高亮 ...

  10. day2-元组、字典、文件操作

    学习内容: 1. 元组操作 2. 字典操作 3. 文件操作 4. 深浅copy 1. 元组操作: 元组和列表非常相似,只不过元组不能在原处修改(它是不可变的),并且通常写成圆括号中的一系列项. # 元 ...