1.getBoundingClientRect
一.getBoundingClientRect()分析
getBoundingClientRect()获取元素位置,这个方法没有参数
getBoundingClientRect()用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置。
getBoundingClientRect()是DOM元素到浏览器可视范围的距离(不包含文档卷起的部分)。
// 我的需求就是在鼠标移入button的时候显示当前tootip
1.通过 ref="rtButtonTooltip"获取 tootip
2.通过getBoundingClientRect获取当前的宽高
<rt-tooltip
v-if="tooltip"
ref="rtButtonTooltip"
popper-class="rt-button-tooltip"
:content="String(tooltip)"
placement="bottom"
>
<div style="position:absolute;top:-1px;left:-1px"></div>
</rt-tooltip>
mounted () {
this.$nextTick(() => {
if (this.tooltip && this.$refs.rtButton && this.$refs.rtButtonTooltip) {
const { width, height } = this.$refs.rtButton.getBoundingClientRect();
this.$refs.rtButtonTooltip.$el.style.width = width;
this.$refs.rtButtonTooltip.$el.style.height = height;
}
})
},
2. 可选链操作符号
1.可选链操作符的使用场景
const obj= {
school:{
classroom:{
room1:'班级1'
room2:'班级2'
}
}
}
2.你是否遇到过这样的数据嵌套结构?接下来我们去打印数据
console.log(obj.school.classroom.room1) // 班级1
如果classroom不存在了就会报错了
const obj= {
school:{
}
}
console.log(obj.school.classroom.room1) // 这种情况下就会报错
在没有可选链之前我们要一层一层对数据判断
console.log(obj.school&&obj.school.classroom&&obj.school.classroom.room1)
可选链操作符处理
console.log(obj?.school?.classroom?.room1)
开源项目学习地址 [vue3-element-admin]-https://gitee.com/youlaiorg/vue3-element-admin