返回值
返回值是一个 DOMRect 对象,这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合, 即:是与该元素相关的CSS 边框集合
前几天,实现一个需求,需要在输入框获得焦点之后弹出一个弹层。这里,需要特别注意的地方有:
(1)侧栏,它的爷爷是绝对定位,爸爸是相对定位,它自己,位置要放在其他的页面(各种定位)
(2)出现在弹窗的侧栏,跟(1)的场景像,但是因为弹窗所在的页面大小不一样,所以,还是有区别的。
文字解释不清楚,以下是对应上面两种场景的设计图:
(1)定位问题:嵌套层级太深了,所以,弹层的定位方式用position:absolute已经无法实现了,这里定位方式用fixed。
(2)要实现不同分辨率下,间距(红色圈出的地方)不能改变,这里需要进行一些计算。
弹层的样式:
.ez-filter-tip-aside-panel {
box-sizing: border-box;
position: fixed;
height: auto;
width: @ez-filter-tip-aside-panel-width;
margin-top: 0.1em;
color: @light-color;
background-color: @ez-filter-tip-aside-panel-background-color;
overflow: hidden;
display: flex;
flex-direction: row;
top: @ez-filter-tip-aside-panel-top;
font-size: @font-size-small;
z-index: @dropdown-z-index;
box-shadow: 0 2px 8px @filter-tip-aside-panel-box-shadow;
height: @ez-filter-tip-aside-panel-height;
padding: @widget-space;
}
有了这段代码,可以实现弹层可以显示,但是,距离右侧的距离:
这里给出了计算方式:
找出弹层的父级元素的位置,然后减去弹层的宽度和它到爸爸的距离,就可以计算出来
<div class="ez-filter-container" v-el:ez-filter-inpt-wrap :style="{width: width}" @click="showSelectPanel">
<div class="ez-filter-tip-aside-panel" v-if="showRegAside" :style="{left: adaptionleft + 'px'}">
<reg-instruction></reg-instruction>
</div>
regBoxWidth: 312,
sideBarPadding: 24,
let getBrowserLeft = this.$els.ezFilterInptWrap.getBoundingClientRect().x
// console.log(this.$els.ezFilterInptWrap.getBoundingClientRect())
this.adaptionleft = getBrowserLeft - this.sideBarPadding - this.regBoxWidth