参考:实现在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. 杭电oj 2072————统计单词数(java)

    problem:统计单词数 思路:利用HashMap的特性——不能反复存储同一个键得数据,所以可以保证map里边儿的元素都是不重复的,存储完毕之后直接输出size就好了 注意事项: 1.利用strin ...

  2. python:函数中的*args与**kwargs

    首先定义一个包含*args和**kwargs的函数,这个函数唯一的功能就是输出自己的两个参数,以此来理解*args和**kwargs def myFunc(*args, **kwargs): prin ...

  3. 如何查看mac多少位的操作系统?

    1.点击工具栏左上角点击 (苹果Logo)标志,关于本机  -->  更多信息 --> 系统报告  -->(左侧栏中)软件 (有的电脑是没有的例如第一张图) 2. 输入命令 una ...

  4. NotePad++安装及配置

    NotePad++是一款轻量级的语言开发工具,是学习编程语言入门工具. 下面介绍下配置方法(Java为例) 配置插件NppExec 配置JAVA编译命令javac 配置JAVA运行命令java 上述两 ...

  5. selenium的元素定位方法-By

    如果在定位元素属性中包含了如ID等元素属性,那么在一个测试中,定位方法具体有哪几种,可以参考by模块中的By类,By的代码如下: class By(object): """ ...

  6. 每天进步一点点------Allegro中SYMBOL种类

    Allegro 中SYMBOL 种类在Allegro 中, Symbol 有五种, 它们分别是Package Symbol .Mechanical Symbol.Format Symbol.Shape ...

  7. gerp 查找, sed 编辑, awk 根据内容分析并处理.的作用

    awk(关键字:分析&处理) 一行一行的分析处理 awk '条件类型1{动作1}条件类型2{动作2}' filename, awk 也可以读取来自前一个指令的 standard input相对 ...

  8. 如何在IntelliJ Idea中同时启动不同端口的两个实例

    在SpringCloud开发过程中需要在一个项目中启用不同的端口,我使用的工具是IDEA 步骤1 创建SpringBoot工程 步骤2 在配置文件中添加如下配置: spring.application ...

  9. 【一句话解释】docker and vm

    效果 在一个host上面运行多个os,达到快速部署以及充分利用资源的额目的 vm 虚拟机,会模拟一个完整的操作系统堆栈出来. 缺点开销大,优点,guest os 是一个完整的操作系统 根据hyperv ...

  10. google插件跨域含用户请求WebApi解决的方案

    问题描述: google插件跨域请求WebApi相关解决方案 1.ajax解决含登录用户信息 $.ajax({ url: url, type: "POST", timeout: 6 ...