vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度

前言

  • 在实际开发中我们经常使用el-dialog弹出框做表单,一般情况都是居中。遮挡到了一部分数据

  • 当我们想要查看弹出框下面的数据时,就只能先把弹出框关闭,查看完数据之后在打开弹框

  • 我们通过动态样式,和鼠标事件就可以实现。但自己写的在适配性和全面性上还是有所欠缺的

  • 这种我们可以直接复制使用,写成全局自定义指令。多的地方使用,并且只做加法

代码实现-没有自定义指令情况下

1.来到src/创建directive文件夹

2.在src/directive/创建dialog文件夹专门用来放关于dialog的代码

3.在src/directive/dialog创建drag.js文件-弹出框的拖拽-代码如下

/*** v-dialogDrag 弹窗拖拽*/
export default {bind(el, binding, vnode, oldVnode) {const value = binding.valueif (value === false) return// 获取拖拽内容头部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);dragDom.style.position = 'absolute';dragDom.style.marginTop = 0;let width = dragDom.style.width;if (width.includes('%')) {width = +document.body.clientWidth * (+width.replace(/%/g, '') / 100);} else {width = +width.replace(/\px/g, '');}dragDom.style.left = `${(document.body.clientWidth - width) / 2}px`;// 鼠标按下事件dialogHeaderEl.onmousedown = (e) => {// 鼠标按下,计算当前元素距离可视区的距离 (鼠标点击位置距离可视窗口的距离)const disX = e.clientX - dialogHeaderEl.offsetLeft;const disY = e.clientY - dialogHeaderEl.offsetTop;
​// 获取到的值带px 正则匹配替换let styL, styT;
​// 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为pxif (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;
​let finallyL = l + styLlet finallyT = t + styT
​// 移动当前元素dragDom.style.left = `${finallyL}px`;dragDom.style.top = `${finallyT}px`;
​};
​document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}}
}

4.在src/directive/dialog创建dragWidth.js文件-弹出框的宽度改变-代码如下

/*** 可拖动弹窗宽度(右侧边)*/
​
export default {bind(el) {const dragDom = el.querySelector('.el-dialog');const lineEl = document.createElement('div');lineEl.style = 'width: 5px; background: inherit; height: 80%; position: absolute; right: 0; top: 0; bottom: 0; margin: auto; z-index: 1; cursor: w-resize;';lineEl.addEventListener('mousedown',function (e) {// 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - el.offsetLeft;// 当前宽度const curWidth = dragDom.offsetWidth;document.onmousemove = function (e) {e.preventDefault(); // 移动时禁用默认事件// 通过事件委托,计算移动的距离const l = e.clientX - disX;dragDom.style.width = `${curWidth + l}px`;};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;};}, false);dragDom.appendChild(lineEl);}
}

5.在src/directive/dialog创建dragHeight.js文件-弹出框的宽度和高度改变-代码如下

/***  可拖动弹窗高度(右下角)- 也可以改变高度和宽度*/
​
export default {bind(el) {const dragDom = el.querySelector('.el-dialog');const lineEl = document.createElement('div');lineEl.style = 'width: 6px; background: inherit; height: 10px; position: absolute; right: 0; bottom: 0; margin: auto; z-index: 1; cursor: nwse-resize;';lineEl.addEventListener('mousedown',function(e) {// 鼠标按下,计算当前元素距离可视区的距离const disX = e.clientX - el.offsetLeft;const disY = e.clientY - el.offsetTop;// 当前宽度 高度const curWidth = dragDom.offsetWidth;const curHeight = dragDom.offsetHeight;document.onmousemove = function(e) {e.preventDefault(); // 移动时禁用默认事件// 通过事件委托,计算移动的距离const xl = e.clientX - disX;const yl = e.clientY - disYdragDom.style.width = `${curWidth + xl}px`;dragDom.style.height = `${curHeight + yl}px`;};document.onmouseup = function(e) {document.onmousemove = null;document.onmouseup = null;};}, false);dragDom.appendChild(lineEl);}
}

6.在src/directive/创建index.js文件-对自定义指令统一注册-代码如下

// dialog弹出框-可拖动
import dialogDrag from './dialog/drag'
// dialog弹出框-宽度可拖动
import dialogDragWidth from './dialog/dragWidth'
// dialog弹出框-高度可拖动(也可拖动宽度)
import dialogDragHeight from './dialog/dragHeight'
​
const install = function (Vue) {// dialog弹出框-可拖动-使用v-dialogDragVue.directive('dialogDrag', dialogDrag)// dialog弹出框-宽度可拖动-使用v-dialogDragWidthVue.directive('dialogDragWidth', dialogDragWidth)// dialog弹出框-高度可拖动(也可拖动宽度)- 使用v-dialogDragHeightVue.directive('dialogDragHeight', dialogDragHeight)
}
​
​
export default install

7.来到main.js引入注册

// 自定义指令
import directive from './directive'
​
// 挂载
Vue.use(directive)

8.来到页面使用


总结:

经过这一趟流程下来相信你也对 vue el-dialog弹出框自定义指令实现拖拽改变位置-宽度-高度 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/114451.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

AWK语言第二版 第3章.探索性数据分析 3.1泰坦尼克号的沉没

这章也是第一版没有,第二版新增的。 3. 探索性数据分析 上一章给出了一些个人使用的小脚本,通常是特制或专用的。在本章中,我们还会展示Awk在现实中的典型使用场景:使用Awk和其他工具来非正式地探索一些真实的数据,目…

3D双目跟踪瞳孔识别

人眼数据集通常用于眼部相关的计算机视觉、眼动追踪、瞳孔检测、情感识别以及生物特征识别等领域的研究和开发。以下是一些常见的人眼数据集: BioID Face Database: 这个数据库包含1,521张近距离的人脸图像,其中包括瞳孔位置的标记。它通常用于瞳孔检测和…

Linux 中断

CPU自动完成 GIC驱动 Linux内核 用户编写的中断服务程序 request_irq() free_irq() typedef irqreturn_t (*irq_handler_t)(int, void *) enable_irq() disable_irq() local_irq_enable() local_irq_restore() local_irq_disable() local_irq_save() 上半部//顶半…

effective c++学习笔记(后四章)

六 继承与面向对象设计 红色字 \color{FF0000}{红色字} 红色字 32 确定你的public继承塑模出 is-a关系 如果你令class D (“Derived”)以public形式继承class B (“Base”),你便是告诉C编译器(以及你的代码读者)说,每一个类型为…

Origami Studio for Mac:塑造未来,掌握原型设计之巅

在当今高度竞争的设计领域,原型设计的重要性不言而喻。它不仅是沟通想法,也是测试和改进设计的关键环节。而现在,一款强大的原型设计工具——Origami Studio for Mac,正在席卷设计界,以其独特的功能和卓越的性能&#…

shell变量

shell变量之学习笔记 Shell变量概念1 shell变量分类:2 变量的赋值3 变量赋值格式:4 变量命名方式5 变量声明6 变量引用7 变量清除8 变量只读9 内部参数变量10 位置参数变量11 退出和返回状态12 命令替换13 read命令14 字符串长度与截取15 字符串替换16 变…

Spring Security—Servlet 应用架构

目录 一、Filter(过滤器)回顾 二、DelegatingFilterProxy 三、FilterChainProxy 四、SecurityFilterChain 五、Security Filter 六、打印出 Security Filter 七、添加自定义 Filter 到 Filter Chain 八、处理 Security 异常 九、保存认证之间的…

利用TreeMap来解决P3029 [USACO11NOV] Cow Lineup S

P3029 [USACO11NOV] Cow Lineup S - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 好了,我们首先要统计奶牛的种类数量n,好与接下来我们记录一个范围内的奶牛的数量作比较,一旦我们统计范围内的奶牛的数量m达到我们刚开始记录的奶牛的数量n我…

20231018刷题记录

P1878 舞蹈课 堆。 对于“舞蹈技术差”这一变量,可以想到用优先队列维护实现 O ( log ⁡ n ) O(\log n) O(logn) 级别的复杂度。 对于整个舞蹈队伍的删除操作,可以用双向链表维护,比较经典的应用是开车旅行。这个东西首先比 STL 方便&#x…

C语言【文件】

目录 概念 文件名 文件的打开和关闭 fopen fclose 输入输出函数 fputc fgetc fputs fgets fprintf fscanf fwrite fread 三种流 scanf和sprintf 结构体转化 ​编辑 文件的随机读写 fseek ftell rewind 文本文件和二进制文件 文件读取结束的判定 文件缓冲…

C++标准模板(STL)- 类型支持 (运行时类型识别,type_info )

运行时类型识别 定义于头文件 <typeinfo> 含有某个类型的信息&#xff0c;由实现生成。​​这是 typeid 运算符所返回的类。 std::type_info 定义于头文件 <typeinfo> class type_info; 类 type_info 保有一个类型的实现指定信息&#xff0c;包括类型的名称和…

【论文解读】Parameter-Efficient Transfer Learning for NLP

一. 介绍 1.1 为什么要引入Adapter 在存在许多下游任务的情况下&#xff0c;微调的参数效率很低:每个任务都需要一个全新的模型。作为替代方案&#xff0c;我们建议使用适配器模块进行传输。 1.2 论文目标 目标是建立一个在所有这些方面都表现良好的系统&#xff0c;但不需…

docker图形胡界面管理工具--Portainer可视化面板安装

1.安装运行Portainer docker run -d -p 8088:9000 \ > --restartalways -v /var/run/docker.sock:/var/run/docker.sock --privilegedtrue portainer/portainer--restartalways&#xff1a;Docker启动后容器自动启动 -p&#xff1a;端口映射 -v&#xff1a;路径映射2.通过…

写一个简单的解释器(2) 构建标记流

确定标记类型 分为几个大类&#xff1a; 用户符号&#xff08;类型/标识符/数字/字符串…)关键字 (流程控制和定义符)括号 &#xff08;这里暂时认为 [] 属于括号&#xff09;分号 上述四类标记基本囊括了 vc \texttt{vc} vc 中的所有最小单元的类型&#xff0c;但是因为构…

【C++】哈希应用——海量数据面试题

哈希应用——海量数据面试题 一、位图应用1、给定100亿个整数&#xff0c;设计算法找到只出现一次的整数&#xff1f;2、给两个文件&#xff0c;分别有100亿个整数&#xff0c;我们只有1G内存&#xff0c;如何找到两个文件交集&#xff1f;&#xff08;1&#xff09;用一个位图…

JAVA基础(JAVA SE)学习笔记(七)面向对象编程(进阶)

前言 1. 学习视频&#xff1a; 尚硅谷Java零基础全套视频教程(宋红康2023版&#xff0c;java入门自学必备)_哔哩哔哩_bilibili 2023最新Java学习路线 - 哔哩哔哩 第二阶段&#xff1a;Java面向对象编程 6.面向对象编程&#xff08;基础&#xff09; 7.面向对象编程&…

Ubuntu下 u2net tensorrt模型部署

TensorRT系列之 Windows10下yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov8 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov7 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov6 tensorrt模型加速部署 TensorRT系列之 Linux下 yolov5 tensorrt模型加速…

nginx部署vue项目(访问路径加前缀)

nginx部署vue项目(访问路径加前缀) nginx部署vue项目&#xff0c;访问路径加前缀分为两部分&#xff1a; &#xff08;1&#xff09;修改vue项目&#xff1b; &#xff08;2&#xff09;修改nginx配置&#xff1b; vue项目修改 需注意&#xff0c;我这是vue-cli3配置&#x…

某验四代滑块验证码逆向分析

逆向目标 目标&#xff1a;某验四代滑块验证码&#xff0c;w 参数逆向主页&#xff1a;aHR0cHM6Ly9ndDQuZ2VldGVzdC5jb20v加密算法&#xff1a;RSA、AES 通讯流程 验证码流程分析 进入网页后&#xff0c;打开开发者人员工具进行抓包&#xff0c;点击滑动拼图验证&#xff0c…

Vue3语法-双向绑定

点击加入精英计划可以加入 点击名字可以删除 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title><!-- vue.js --><script src"https://unpkg.com/vue3/dist/vue.glob…