el-tabs 自适应高度

案例

1. 获取可视化高度

javascript 复制代码
luTabsHeight(element) {  
     let offsetTop = 0; //存储从元素到视口顶部的总偏移量 
     let currentElement = element; //将传入的元素赋值给currentElement,准备遍历其祖先元素  
     // 遍历元素的每个祖先元素  
     while (currentElement) {  
       offsetTop += currentElement.offsetTop;  // 累加每个祖先元素的 offsetTop  
       if (currentElement.scrollTop) {  // 检查当前元素是否是滚动容器(比如 div 有 overflow-y: auto) 
         offsetTop -= currentElement.scrollTop; // 累加滚动容器的 scrollTop  
       }  
       currentElement = currentElement.offsetParent;// 移动到父元素  
     }  
     offsetTop += window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;  // 还需要考虑页面的滚动(视口滚动) 
     this.heights=window.innerHeight-offsetTop-105
     console.log(window.innerHeight-offsetTop,'高度',this.heights);
    },
//window.pageYOffset 获取页面垂直滚动距离的标准方式;对于旧版浏览器,可能需要检查document.documentElement.scrollTop(对于HTML元素)或document.body.scrollTop(对于body元素)
//window.innerHeight 可视窗口高度 - offsetTop 计算出的偏移量,105是我自己页面tabs外面元素的高度

2. 使用内联样式(粗暴)

html 复制代码
<el-tabs :tab-position="tabPosition"
      ref="tabs"
      :style="{ '--header-height': heights + 'px' }" 
      @tab-click="handleClick"
      v-model="activeName">
 <!-- 其他代码 --> 
</el-tabs>
<script>  
export default {  
  data() {  
    return {  
      heights : 60, // 动态调整这个值  
      // 其他数据...  
    };  
  },  
  methods: { 
    //获取tab 动态高度,给heights动态赋值 
   luTabsHeight(){}
  }
};  
</script>
<style scoped lang="scss">
::v-deep .el-tabs--left .el-tabs__header.is-left{
  height: var(--header-height); 
}
</style>

内联不推荐,大家有推荐的方法不?

相关推荐
lyj16899719 小时前
el-select+el-tree实现下拉树形选择
javascript·vue.js·elementui
coding随想1 天前
scss报错Sass @import rules are deprecated and will be removed in Dart Sass 3.0.0
前端·node.js·sass·scss
thinkQuadratic1 天前
scss预处理器对比css的优点以及基本的使用
前端·css·scss
招风的黑耳2 天前
ElementUI元件库——提升Axure原型设计效率与质量
前端·elementui·axure
油丶酸萝卜别吃3 天前
springBoot与ElementUI配合上传文件
spring boot·后端·elementui
Jiaberrr3 天前
介绍几种创意登录页(含完整源码)
前端·javascript·css·elementui·css3
零点七九3 天前
sortablejs el-table 树结构拖拽
javascript·vue.js·elementui·sortablejs
LinDaiuuj3 天前
scss基础用法
前端·css·scss
兰德里的折磨5503 天前
对于后端已经实现逻辑了,而前端还没有设置显示的改造
前端·vue.js·elementui
梦想家加一4 天前
elementUI el-image图片加载失败解决
javascript·vue.js·elementui