自适应布局

最新推荐文章于 2024-11-07 15:16:14 发布

LJbab

最新推荐文章于 2024-11-07 15:16:14 发布

阅读量96

点赞数 2

分类专栏：前端进阶文章标签：前端

本文链接：https://blog.csdn.net/weixin_44730244/article/details/140699804

版权

前端进阶专栏收录该内容

7 篇文章 0 订阅

订阅专栏

//处理底部表格宽度
    handlerWidth() {
      let dom = document.getElementsByClassName('tablewidget')[0]
      let domRl = document.getElementsByClassName('right-list')[0]
      let domR = document.getElementsByClassName('right_content')[0]
      let domL = document.getElementsByClassName('left-list')[0]
      let domLC = document.getElementsByClassName('L')[0]
      let attributePopupDom = document.getElementById('attributePopup')
      const observe = new ResizeObserver(function(mu, ob) {
        // 右侧专题宽度
        let width = Number(domR.offsetWidth)
        // 最右侧专题宽度
        let width2 = Number(domRl.offsetWidth || domRl.style.width)
        // 最左侧专题宽度
        let width3 = Number(domL.offsetWidth)
        // // 右侧专题宽度
        // let width = Number(
        //   document.getElementsByClassName('right_content')[0].offsetWidth
        // )
        // // 最右侧专题宽度
        // let width2 = Number(
        //   document.getElementsByClassName('right-list')[0].offsetWidth ||
        //     document.getElementsByClassName('right-list')[0].style.width
        // )
        // // 最左侧专题宽度
        // let width3 = Number(
        //   document.getElementsByClassName('left-list')[0].offsetWidth
        // )
        domLC.style.left = width3 + 'px'
        domLC.style.transform = width3
          ? 'translateX(-8.5px)'
          : 'translateX(0px)'
        this.domW = width + width2 + width3 + 20
        let w = this.domW
        dom.style.width = `calc(100vw - ${w}px)`
        dom.style.left = width3 + 10 + 'px'
        let leftMoveWidth = width + width2
        attributePopupDom.style.right = `calc(${leftMoveWidth + 10}px)`
      })
      observe.observe(domR, {
        attributes: true
      })
      observe.observe(domRl, {
        attributes: true
      })
      observe.observe(domL, {
        attributes: true
      })
    },