Vue. 之 Element dialog 拖拽
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 拖拽的更多相关文章
- vue简单的自由拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Vue实现拖拽穿梭框功能四种方式
一.使用原生js实现拖拽 点击打开视频讲解更加详细 <html lang="en"> <head> <meta charset="UTF-8 ...
- Vue 表单拖拽排序
Vue table表单拖拽 业务需求: 因为数据展示使用的是 elementUI 的 Table进行数据展示的,现在的需求是通过拖拽表单进行表单排序.同时,动态修改表单中的数据排列顺序.查阅了好多资料 ...
- 自由拖拽DIV实现
最近在做的项目有个效果是要实现div随意拖拽改变大小,前端框架选择的是vue.js,UI用的是element,拖拽效果可以很简单的实现,但是在拖拽过程中发现会对其他元素实现全选效果,因此最后选择使用元 ...
- HTML5文件拖拽
HTML5新增的File API, 可以获取名称.文件大小.类型等信息,需先对DOM中的Element进行拖拽事件绑定 相关API 首先获取节点,绑定拖动到该节点的事件,可以改变鼠标形状 var dr ...
- 通过 JS 实现简单的拖拽功能并且可以在特定元素上禁止拖拽
前言 关于讲解 JS 的拖拽功能的文章数不胜数,我确实没有必要大费周章再写一篇重复的文章来吸引眼球.本文的重点是讲解如何在某些特定的元素上禁止拖拽.这是我在编写插件时遇到的问题,其实很多插件的拖拽功能 ...
- draggable()拖拽时限制移动区域
jQuery-UI为我们提供了一个非常便捷的拖拽方法:draggable(),在使用此方法时,我们可能会希望控件只在某一区域中移动,不能被拖出边界,这样的话我们可以使用下面的方法: 调用draggab ...
- VUE +element el-table运用sortable 拖拽table排序,实现行排序,列排序
Sortable.js是一款轻量级的拖放排序列表的js插件(虽然体积小,但是功能很强大) 项目需求是要求能对element中 的table进行拖拽行排序 这里用到了sorttable Sortable ...
- Vue+element 需要用到拖拽组件 vuedraggable
新需求是要求界面上的14个可以拖拽,点击保存之后保存拖拽之后的顺序. 确定需求之后肯定第一时间是百度,发现有个插件vuedragger拖拽,按照教程就懵懂的开始了. 官方示例:https://davi ...
随机推荐
- vs2017 Visual Studio 离线安装方法
转自:http://www.jb51.net/softjc/539858.html 第一部分:离线下载安装文件 这里描述是包括所有版本,截图以下载VS2017社区版为例: ①登入VS官网下载页面,选择 ...
- day 65 Django基础之django分页
Django基础之django分页 一.Django的内置分页器(paginator) view from django.shortcuts import render,HttpRespons ...
- 有关Tensorboard问题
先说我的各个版本: 操作系统: win7 64 Python: 3.5 Tensorflow: 1.2 Tensorboard: 1.6 错误一: 只显示Graphs,不显示Histogram和Sca ...
- HYNB Round 15: PKU Campus 2019
HYNB Round 15: PKU Campus 2019 C. Parade 题意 将平面上n*2个点安排在长度为n的两行上. 做法 首先可以忽略每个点之间的影响,只用考虑匹配即可 然后把所以点归 ...
- 大半宿,封装了一个MP3播放器的类,写了个简陋的播放器
用 winmm.lib 写的 封装不是很好,而且没有优化,效率可能有问题,但是现在几乎没有什么大问题 我用我封装的类,写了一个小播放器,界面上的所有功能都实现了,包括双击列表中的文件名,直接播放文件 ...
- 13-5-let和()的作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- spark 应用场景1-求年龄平均值
原文引自:http://blog.csdn.net/fengzhimohan/article/details/78535143 该案例中,我们将假设我们需要统计一个 10 万人口的所有人的平均年龄,当 ...
- 帝国cms学习
手册地址1 手册地址2 入门 安装: 将下载的upload里的文件上传到网站更目录 然后 域名/e/install/index.php Warning: Use of undefined consta ...
- 1 环境搭建_及参考资料介绍_ASM驱动开发疑难解决
1 环境搭建 > 这里和 周壑老师不同:大家觉得哪中适合当前的物理机,就配置那种. 如下: win7 32 位: vs 2010; visualDDk 驱动项目插件: V A --- 代码高亮 ...
- day2-元组、字典、文件操作
学习内容: 1. 元组操作 2. 字典操作 3. 文件操作 4. 深浅copy 1. 元组操作: 元组和列表非常相似,只不过元组不能在原处修改(它是不可变的),并且通常写成圆括号中的一系列项. # 元 ...