简单实现el-dialog的拖拽功能

更新时间:2023-05-16 22:36:57 阅读: 评论:0

上图中,我给el-scrollbar__view这个div增加了10px的红⾊边框,整个div的实际⾼度,宽度变成了3452px,1920px,观察clientWidth,clientHeight的值是3432px,1900px,并没有包含边框和滚动条的宽度。
克服自己的弱点2. scrollWidth,scrollHeight
scrollWidth,scrollHeight表⽰对象的实际内容的宽度,不包括边框(但是包括滚动条),会随对象中内容超过可视区后⽽变⼤。
上图中,我还是给el-scrollbar__view这个div增加了10px的红⾊边框,整个div的实际⾼度,宽度变成了3452px,1920px,观察scrollWidth,scrollHeight的值是3432px,1900px,并没有包含边框的宽度。
3. offtWidth,offtHeight
offtWidth,offtHeight表⽰对象整体的实际宽度,包括滚动条和边框,会随对象显⽰⼤⼩的变化⽽改变。
上图中,我还是给el-scrollbar__view这个div增加了10px的红⾊边框,整个div的实际⾼度,宽度变成
了3452px,1920px,观察scrollWidth,scrollHeight的值仍然是3452px,1920px,包含滚动条和边框。
4. clientLeft,clientTop
clientLeft,clientTop表⽰对象边框的宽度。
别墅庭院设计说明上图中,我还是给el-scrollbar__view这个div增加了10px的红⾊边框,观察clientLeft, clientTop均为10px。郭家街小学
5. scrollLeft,scrollTop
scrollLeft,scrollTop表⽰对象的显⽰(可见)的内容与该对象实际的内容的距离。
上图中,我们给content这个ction设置了宽⾼均是300px,并设置显⽰滚动条,将滚动条拖动⼀部分,观察scrollLeft,scrollTop的值分别是164px,204px,这对应着当前内容距离原来实际内容的距离(假设蓝⾊框是实际内容的距离)。
6. offtLeft,offtTop
offtLeft,offtTop表⽰对象边框的外边缘距离与已定位的⽗容器(offtparent)的内边距离(不包括元素的边框和⽗容器的边框)。
上图中,el-dialog这个div距离已定位的⽗容器(这⾥是el-dialog__wrapper)的宽⾼分别是672px,61px,与offtLeft,offtTop值⼀致。
我们给el-dialog__wrapper加上⼀个20px的黄⾊边框,给el-dialog加上⼀个10px的蓝⾊边框,再来观察offtLeft,offtTop的值,发现在计算时,是从黄⾊边框的内边距到蓝⾊边框的外边距,不包括边框。
7. coding
明确上述概念之后,我们来着⼿写代码,先说下我的业务场景。
有⼀个dialog弹框,弹框的背景并不是全屏的,只在除header,sidebar的地⽅显⽰,要求拖拽dialog弹框不能超过背景。
我们在main.js同级⽬录创建directives.js,具体代码如下。qq介绍
// directives.js
import Vue from 'vue';
// v-dialogDrag: 弹窗拖拽
Vue.directive('dialogDrag', {
北京社保公积金bind(el, binding, vnode, oldVnode) {
// 获取拖拽内容头部
const dialogHeaderEl = el.querySelector('.el-dialog__header');
// 获取拖拽内容整体这个rrc-dialog是我⾃⼰封装的组件如果使⽤element的组件应写成.el-dialog
const dragDom = el.querySelector('.rrc-dialog');
dialogHeaderEl.style.cursor = 'move';
// 获取原有属性 ie dom元素.currentStyle ⽕狐⾕歌 ComputedStyle(dom元素, null);缴费基数是什么
const sty = dragDom.currentStyle || ComputedStyle(dragDom, null);
// ⿏标按下事件
大巴扎// ⿏标按下,计算当前元素距离可视区的距离 (⿏标点击位置距离可视窗⼝的距离)
const disX = e.clientX - dialogHeaderEl.offtLeft;
const disY = e.clientY - dialogHeaderEl.offtTop;
// 获取到的值带px 正则匹配替换
let styL, styT;
// 注意在ie中第⼀次获取到的值为组件⾃带50% 移动之后赋值为px
if (sty.left.includes('%')) {
styL = +document.body.clientWidth * (+place(/\%/g, '') / 100);
styT = +document.body.clientHeight * (+place(/\%/g, '') / 100);
唐朝的皇帝列表

本文发布于:2023-05-16 22:36:57,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/fan/89/905531.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:距离   内容   边框
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图