vue 和 js 没使用过的一些方法

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

vue 和 js 没使用过的一些方法

猜你喜欢