上图中,我给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);
唐朝的皇帝列表