element-ui dialog组件添加可拖拽位置 可拖拽宽高
edge浏览器下作的gif
http://www.lanourteam.com/%E6...
有几个点需要注意一下
- 每个弹窗都要有唯一dom可操作 指令可以做到
- 拖拽时要添加可拖拽区块 header
- 由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题
- 实现拖拽宽高时 获取边缘问题 div定位 设置模拟边缘
<template>
<el-dialog
v-dialogDrag
ref="dialog__wrapper">
<div class="dialog-body"> <div
class="line"
v-dialogDragWidth="$refs.dialog__wrapper"></div>
</div>
</el-dialog>
</template>
dialog组件的其它属性这里就不写了. 项目中的指令都定义directives.js中集中管理, 全局注册.
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;
};
}
}
})
main.js:
// 引入自定义指令
import './directives.js';
element-ui dialog组件添加可拖拽位置 可拖拽宽高的更多相关文章
- [转]vue Element UI走马灯组件重写
https://blog.csdn.net/u013750989/article/details/82885482 1.element ui走马灯组件 -- carousel分析一波源代码:carou ...
- 封装一个优雅的element ui表格组件
现在做后台系统用vue + elementUI 的越来越多,那element ui的 el-table 组件肯定也离不开.虽然element ui的table组件很好.但是表格和分页是分离的.每次写表 ...
- 普通element ui table组件的使用
1.使用基础的element ui 的table的基础使用 首先,使用前要先引用element库到项目中,可以直接引入element的js和css或者在vue项目下按需加载不同的组件 废话不多说,直接 ...
- element ui step组件在另一侧加时间轴显示
这是我开发的时候遇到的一个问题:项目需要在步骤条(竖直方向)的另一侧加时间显示,但是我在element ui 的step组件中一直没找着设置方法,所以就自己想了个办法加进来,效果如下: 代码如下,先上 ...
- Element UI table组件源码分析
本文章从如下图所示的最基本的table入手,分析table组件源代码.本人已经对table组件原来的源码进行削减,源码点击这里下载.本文只对重要的代码片段进行讲解,推荐下载代码把项目运行起来,跟着文章 ...
- Element UI表格组件技巧:如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...
- Element UI 中组件this.$message报错
最近在做毕设的时候,用Element UI中的消息提示message一直报以下的错误: 展示的效果也不好看,没有图标什么的: 但我明明有在main.js引入了element-ui 呀,因为毕设时间很赶 ...
- element的Dialog组件踩坑
在一个组件页面中需要有一个弹窗,为了代码简洁我把弹窗封装成一个组件方便重复调用 描述大致是一个父组件,里面有一个按钮还有一个子组件(弹窗),点击按钮让弹窗出来,弹窗自带的有关闭功能,点击关闭以后再点击 ...
- 使用 Element UI Select 组件的 value-key 属性,让绑定值可以为一个对象
EsunR 2019-11-07 12:14:42 12264 收藏 6 分类专栏: Vue 文章标签: element-ui 版权 当我们使用 Elemet UI 的选择组件进行多选时,Sele ...
随机推荐
- adobe flash player升级coredump分析
flash player版本号:14.0.0.125 产品名称:Adobe® Flash® Player Installer/Uninstaller 系统:windows xp sp3 调试器:win ...
- Linux中对启动过程中选择启动级别那个界面设置密码
生成md5形式的密码: a.执行 grub-md5-crypt 命令 b.在接下来的交互界面中输入自己的密码 c.生成加密后的密码修改配置文件: a.vi /boot/grub/grub.conf ...
- Android-实现切换Fragment页功能
场景:使用Fragment实现切页. 类结构: 一:Activity Activity中使用getSupportFragmentManager().beginTransaction()来填充一个Fra ...
- zabbix-2.4.8-1添加nginx状态监控
前期准备:nginx在编译是必须要加如下参数: 并且要在nginx的配置文件中添加如下配置: server { listen *: default_server; server_name localh ...
- Tomcat日志备份脚本
#!/bin/bash #Author:fansik #Description:backup tomcat logs #Date:-- directory=/usr/local/tomcat/logs ...
- github代码托管
下载github客户端软件 1) 官网下载help.github.com 2) 百度搜索,一般用于windows7以前的系统 安装github软件 按照软件提示安装即可.不过,博主倾向使用命令行工 ...
- c# 执行批处理文件
ProcessStartInfo proc = new ProcessStartInfo(); proc.UseShellExecute = false; proc.CreateNoWindow = ...
- 希望and目标
软件工程是一门枯燥的课程,这门课我不喜欢上,容易犯困,但就因为如此.我不得不好好的学习,我希望在这门课上.我能将基础学扎实,在实践上可以自己慢慢研究,我的目标不是很远大,学好.学扎实..在这门课上一周 ...
- PAT 天梯赛 L1-024. 后天 【取余】
题目链接 https://www.patest.cn/contests/gplt/L1-024 题意 给出一个数,表示星期几,输出后天是星期几 思路 取余的时候要小心点 AC代码 #include & ...
- WEB网页专业词汇 汇总
Accessibility 可访问性 accessor properties 存取器属性 addition 加法 aggregate 聚合 alphabetical order 字母表顺序 Anch ...