element-ui dialog组件添加可拖拽位置可拖拽宽高

有几个点需要注意一下

每个弹窗都要有唯一dom可操作指令可以做到
拖拽时要添加可拖拽区块 header
由于element-ui dialog组件在设计时宽度用了百分比, 这里不同浏览器有兼容性问题
实现拖拽宽高时获取边缘问题 div定位设置模拟边缘

<template><el-dialogv-dialogDragref="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% 移动之后赋值为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;// 移动当前元素  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';

欢迎加群交流：897724635 更多视频教程资源分享给大家

element-ui dialog组件添加可拖拽位置可拖拽宽高相关推荐

Element UI——滚动条组件(ElScrollBar)修改.el-scrollbar__wrap和el-scrollbar__view的CSS属性
基本概念 el-scrollbar:Element UI隐藏组件. 注意事项: 1.el-scrollbar的父层要有固定高度 2.el-scrollbar的高度要设成100% 3.如果出现横滚动条, ...
element ui table组件扩展关于列表编辑按钮的位置放置
最近在用vue做项目,主要是用的element ui的组件,在用的过程中发现有部分组件需要扩展,改源码太折腾,成本高,就想着如何节省成本来实现这些需求,由于项目时间紧张,有些实现来也没来得及记录一下, ...
实战 | Element UI 父子组件传值与事件绑定（正向）
这是小小的本周的第三篇,本篇将会讲解关于Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据（内容）
Vue Element UI 表格组件利用插槽实现按下按钮后获得本行数据(内容) 能够解决的问题需要在表格中添加一个类似修改或编辑的按钮,按下按钮,弹出的窗口需要本行的渲染数据需要向服务端提交一 ...
实战 | Element UI 父子组件传值与事件绑定（逆向）
这是小小本周的第四篇,本篇将会倒过来讲解Element UI 父子组件传值与事件绑定. 父子组件传值新建父组件和子组件新建父组件代码如下 <template><div id=& ...
响应式滚动图懒加载 element ui el-carousel 组件优化代码
响应式滚动图懒加载 element ui el-carousel 组件优化代码懒加载插件vue-lazyload //main.js import VueLazyload from 'vue-la ...
element ui table组件筛选数据
需求:element ui table组件筛选全部数据 element ui 文档注意: 1. @filter-change 要写在table根元素,也就是<el-table @filter- ...
element走马灯自动_vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element走马灯自动_[转]vue Element UI走马灯组件重写
1.element ui走马灯组件 -- carousel 分析一波源代码: carousel/src/main.vue 文件为 el-carousel文件主要功能 carousel/src/item ...
element ui upload组件文件上传一次后，不论是上传成功之后修改文件再上传还是上传失败重新上传，再次点击上传均无反应。
问题: Element UI Upload 组件文件上传一次后,不论是上传成功之后修改文件再上传还是上传失败重新上传,再次点击上传均无反应. 原因: 第一次上传文件后,浏览器还保存着我们已经上传的文 ...

element-ui dialog组件添加可拖拽位置可拖拽宽高

element-ui dialog组件添加可拖拽位置可拖拽宽高相关推荐

最新文章

热门文章

element-ui dialog组件添加可拖拽位置 可拖拽宽高

element-ui dialog组件添加可拖拽位置 可拖拽宽高相关推荐

最新文章

热门文章

element-ui dialog组件添加可拖拽位置可拖拽宽高

element-ui dialog组件添加可拖拽位置可拖拽宽高相关推荐