element label动态赋值_基于Element封装可拖动放大缩小的弹窗
ElementUI 自带的对话框组件(el-dialog)没有拖动和最小化的处理,目前业务遇到呼叫弹屏处理,基于el-dialog 再次进行封装下,上篇文章有人说图片换成代码就好了,下面代码部分我就直接放代码了,不再用图片处理了。
先看看效果吧
效果gif
下面拆分说明(拖动,全屏,缩放,关闭)
拖拽属性
注册dialogDrag的指令,这样就可以在拖拽弹框的地方直接用v-dialogDrag
这部分代码我借鉴别人写的,主要原理是获取dom节点,根据鼠标按下移动和放开的事件,以当前窗口为基进行位置改变移动。
// 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.cssText += ';cursor:move;' dragDom.style.cssText += ';top:0px;' // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null); const sty = (() => { if (window.document.currentStyle) { return (dom, attr) => dom.currentStyle[attr]; } else { return (dom, attr) => getComputedStyle(dom, false)[attr]; } })() dialogHeaderEl.onmousedown = (e) => { // 鼠标按下,计算当前元素距离可视区的距离 const disX = e.clientX - dialogHeaderEl.offsetLeft; const disY = e.clientY - dialogHeaderEl.offsetTop; const screenWidth = document.body.clientWidth; // body当前宽度 const screenHeight = document.documentElement.clientHeight; // 可见区域高度(应为body高度,可某些环境下无法获取) const dragDomWidth = dragDom.offsetWidth; // 对话框宽度 const dragDomheight = dragDom.offsetHeight; // 对话框高度 const minDragDomLeft = dragDom.offsetLeft; const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth; const minDragDomTop = dragDom.offsetTop; const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight; // 获取到的值带px 正则匹配替换 let styL = sty(dragDom, 'left'); let styT = sty(dragDom, 'top'); // 注意在ie中 第一次获取到的值为组件自带50% 移动之后赋值为px if (styL.includes('%')) { styL = +document.body.clientWidth * (+styL.replace(/%/g, '') / 100); styT = +document.body.clientHeight * (+styT.replace(/%/g, '') / 100); } else { styL = +styL.replace(/px/g, ''); styT = +styT.replace(/px/g, ''); }; document.onmousemove = (e) => { // 通过事件委托,计算移动的距离 let left = e.clientX - disX; let top = e.clientY - disY; // 边界处理 if (-(left) > minDragDomLeft) { left = -(minDragDomLeft); } else if (left > maxDragDomLeft) { left = maxDragDomLeft; } if (-(top) > minDragDomTop) { top = -(minDragDomTop); } else if (top > maxDragDomTop) { top = maxDragDomTop; } // 移动当前元素 dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } }})
操作按钮(全屏,最小化,关闭)
首先去掉默认的关闭图标 show-close=“false",然后在title 的插槽中,放入我们需要的操作按钮或者图标,具体排列样式用css 控制就好了。
相关代码区域
事件处理
我们在处理这个的时候不可避免的遇到了需要更改props属性的问题,我们知道vue中默认的组件中是不能修改props 属性的,如果非要改当然也有别的办法。
第一种方法就是 data 中重新定义一个变量初始用props 传入的值
第二种方法就是 用computed计算属性
第三种方法就是 $emit 触发事件,父组件去处理事件
第四种方法就是 用.sync修饰符 ,本文用到的是这种方法
具体怎么用.sync 修饰符呢,看下面这个小例子
// 父组件// 子组件
其他弹窗事件正常$emit 抛出就可以了
组件封装代码
{{ title }}
{{minContent}}
组件调用
打开弹框
这是弹框内容区域
事件及属性说明
除了特殊的支持 element dialog 的全部属性,也就是文档上的属性都可以用
type: 默认是弹框,如果要最小化的显示就指名不需要就不用传递这个参数
fullscreen.sync: 如果需要自定义动态设置全屏,记得绑定.sync 修饰符
element-ui dialog 文档
总结
以上就是对弹窗组件的封装代码也都在上面了,总的来说业务开发的时候,有轮子最好可以直接用,没有还是需要造造,如果上面写的有问题或多那一部分不理解的,欢迎下面讨论,我们一起学习一起进步。
element label动态赋值_基于Element封装可拖动放大缩小的弹窗相关推荐
- element label动态赋值_浅析 vuerouter 源码和动态路由权限分配
背景 上月立过一个 flag,看完 vue-router 的源码,可到后面逐渐发现 vue-router 的源码并不是像很多总结的文章那么容易理解,阅读过你就会发现里面的很多地方都会有多层的函数调用关 ...
- vue前端上传文件夹的插件_基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件...
1. 前言 之前公司要在管理系统中做一个全局上传插件,即切换各个页面的时候,上传界面还在并且上传不会受到影响,这在vue这种spa框架面前并不是什么难题.然而后端大佬说我们要实现分片上传.秒传以及断点 ...
- element手机验证格式_基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)...
前言 开发过程中遇到了一个需求,根据用户选择的联系方式,动态改变输入框的检验条件,并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com ...
- element vue 动态单选_软件更新丨vue-element-admin 4.0.0 beta 发布,后台集成方案
vue-element-admin 4.0.0 beta 发布了. vue-element-admin 是一个后台集成解决方案,它基于 vue 和 element.它使用了最新的前端技术栈,内置了 i ...
- element ui 二级菜单_基于avue和element-ui集成解决方案avue-cli
avue-cli是一款基于avue和element-ui完全开源.免费的企业后端产品前端集成解决方案,采用最新的前端技术栈,已经准备好了大部分的项目准备工作,你可以快速进行二次开发 功能 全局错误日志 ...
- element ui 选项卡切换_基于element-ui实现标签选项卡
特效描述:基于element-ui实现 标签选项卡.基于element-ui实现标签选项卡 代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 通用标签页,基于element-ui 1.基 ...
- vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点 轻 ...
- java 静态对象赋值_基于Java class对象说明、Java 静态变量声明和赋值说明(详解)...
先看下JDK中的说明: java.lang.Object java.lang.Class Instances of the class Class represent classes and inte ...
- python 数组 动态赋值_动态数组在Python中的实现
动态数组 在python中,列表,集合和字典是可变对象.数字,字符串和元组是不可变的对象.可变对象意味着我们从列表,集合或字典中添加/删除项目,但是对于不可变对象(例如元组或字符串)而言,情况并非如此 ...
最新文章
- wxpython dataview处理大量数据_38个常用Python库:数值计算、可视化、机器学习等8大领域都有了...
- network 学习笔记
- Android Kotlin Exception处理
- wpsppt如何虚化图片_PPT模仿之路——图片以及笔画的虚化
- 聊聊JVM(一)相对全面的GC总结
- JavaWeb 项目时 启动一个线程
- XML具有哪些特点?相对于HTML的优势
- 心得18--JavaWEB国际化类和jstl对应的标签案例分析
- Android学习之基础知识十一 —运用手机多媒体
- python中os.path.basename的使用
- matlab 三角波脉冲轨迹叠加,求解:两同频三角波叠加后的相位差(有程序,有图)...
- chm sharp安卓版_chm阅读器安卓版下载
- 手牵手带你安装zookeeper
- 积目服务器维护,搭建经济高效的制作网络服务器群试验平台
- 力扣刷题:四数之和(C++)
- 微信公纵平台基本配置php_php微信公众平台开发(一) 配置接口
- 单源最短路和多源最短路
- 名字与地址转换getservbyname 与 getservbyport函数
- 利用Pytorch搭建简单的图像分类模型(之二)---搭建网络
- JAVA设计模式什么鬼(中介)——作者:凸凹里歐
热门文章
- linux 串口信息记到日志,[linux学习笔记]之一:ubuntu ch340调试备忘
- php数据库可转java数据库,php转java 系列2 Spring boo 链接数据库jdbc
- 一般java,【面试题】java一般
- python英文字典小程序_python 小程序—三级菜单—循环和字典练习
- springboot 关于 Class path contains multiple SLF4J bindings.警告的解决
- controller接收json数据_SpringMVC实现多种数据类型绑定
- 为什么Mac source ~/.bash_profile只生效一次(macOS Catalina)
- android手机用户,[信息图]Android手机用户如何使用自己的设备?
- python 对比文件内容差异_使用Python来比较文件夹并提取差异部分
- 永洪报表工具_2020年最值得推荐的五大BI工具