参考:实现在vue中element-ui的el-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
:visible.sync="dialogVisible"
v-dialogDrag>
// ...
</el-dialog>

实现在vue中element-ui的el-dialog弹框拖拽的更多相关文章

  1. vue拖拽插件(弹框拖拽)

    // =======拖拽 插件 cnpm install vuedraggableimport draggable from 'vuedraggable' <draggable v-model= ...

  2. element ui 手动关闭$notify弹框

    1.需求: 当用户点击 “点击下载” 后,文件导出这个弹框主动消失. 2.解决方案: 如下图所示 (需要注意的是这里的关闭是 点击弹框任意处就会关闭,如果想实现我的需求需要判断一下即可)

  3. element ui + sortablejs实现表格的行列拖拽

    <template> <div class="container"> <el-table :data="tableData" bo ...

  4. 关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

        方法使用前需了解: 来自”和“小编的小提示: 首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form. 其次在拿到了正确的form后,检查该form上添加 ...

  5. 解决vue中element组件样式修改无效

    vue中element组件样式修改无效 <style> .detail{ .el-input__inner { height: 48px; } } </style> 直接写st ...

  6. Three.js中的div标签跟随(模型弹框)

    目录 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 用法 注意事项 Three.js中的div标签跟随(模型弹框) 参考官方案例 核心渲染器 three.js-master ...

  7. VUE -- 对 Element UI table中数据进行二次处理

    时间——日期 后台经常给我们返回的是 时间戳 (例如:1535620671) 这时候我们页面展现的时候需要将时间戳转换为我们要的格式 例如 (YYYY-MM-DD HH:mm:ss) 如果是在Elem ...

  8. vue.js+element ui Table+spring boot增删改查

    小白初学,不懂的还是太多了,找了好多资料才做出来的先记录一下 1.先用Spring boot创建一个包含了增删改查的项目 2.创建vue.js项目 3.安装Element UI (1)进入项目文件夹下 ...

  9. Vue框架Element UI教程-axios请求数据

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-cn.eleme.io/#/zh-CN gi ...

随机推荐

  1. cat 显示文本、less 分屏显示文本、more 分页显示文件、head 显示文件的前面的内容、cut 切割、paste合并、wc用来对文本进行统计、sort排序、权限、关闭文件、vim的使用

    cat 显示文本  -E 显示结尾的$符 -n 对显示的每一行进行编号 -b 对非空行进行编号 -s 对连续的空行进行压缩 tac 倒序显示 less 分屏显示文本 向下翻一屏 空格 向下翻一行 回车 ...

  2. codeforces 1283D. Christmas Trees(bfs)

    链接: https://codeforces.com/contest/1283/problem/D 题意:给定n个不同的整数点,让你找m个不同的整数点,使得这m个点到到这n个点最小距离之和最小. 思路 ...

  3. 2 request的get和post方法

    requests的get方法 1 在百度里面查询关键字的方法,并获取带百度当前页面 import requests keywords = input('请输入>>>').strip( ...

  4. 格式化输出_python

    一.直接使用 +a='chen'b='xiao'c='zan'print(a+b+c) 二.利用占位符 %%s:占位符:%d:整数:%x:十六进制:%f:浮点数(默认6位小数)特别注意浮点数: 指定长 ...

  5. update_jz首项V5.0-Tutorial

    What's New: 增加了4个对话框,用于展示信息.归并条目.剔除条目 增加了可视化统计图形中每个科室(柱形)的统计总数 可视化图形一些颜色调整(无奈在省份很多的条件下一些颜色还不易区分) 下面是 ...

  6. Go_sql注入

    我们任何时候都不应该自己拼接SQL语句! sqlInjectDemo("xxx' or 1=1#") sqlInjectDemo("xxx' union select * ...

  7. Iris项目结构

  8. Matlab filter常用函数

    Filtering and Analysis Functions Filtering Function Description fftfilt Filters a signal with a digi ...

  9. C语言是菜鸟和大神的分水岭

    作为一门古老的编程语言,C语言已经坚挺了好几十年了,初学者从C语言入门,大学将C语言视为基础课程.不管别人如何抨击,如何唱衰,C语言就是屹立不倒:Java.C#.Python.PHP.Perl 等都有 ...

  10. winform学习(3)窗体事件

    窗体的常用事件 事件可以理解为用户的操作,如点击鼠标键盘 应用程序需要在事件发生时进行响应,因此事件分为: 注册事件:必须为对象注册事件才会被执行(如为某控件添加一个单击的事件) 触发事件:注册后的事 ...