vue中动态使用vh calc设置高度

最新推荐文章于 2024-09-23 21:51:37 发布

原创最新推荐文章于 2024-09-23 21:51:37 发布 · 727 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

文章讲述了在Vue.js应用中如何动态设置<div>元素的高度。通过数据绑定和计算属性，结合CSS的calc函数，调整元素高度以适应页面布局，同时考虑了logo区域的高度。此方法用于实现响应式和自适应的界面设计。

动态设置高度
在这里插入图片描述

  <div class="user_menu_box" :style="menuHeight">
          <!-- 用户信息 -->
          <div class="user_info" :class="{ 'menu-collase': isCollapse }">
            <img
              src="@/assets/login_images/bg.jpg"
              alt="暂无图片"
              class="user_img"
            />

在这里插入图片描述

 data() {
    return {
      bigBackground: ['/allProject', '/approvalList', '/agentProjectList','/workBench'],
      path: '',
      menuHeight: {},
      activeMenuUrl: '',
      searchInput: '',
      menuIndex: '0',
      comeUrl: '', //判断子页面从哪个列表来
    }
  },

在这里插入图片描述

 // 设置卡片列表高度
    setMenuHeight() {
      this.$nextTick(() => {
        const layoutHeight = this.$refs.layoutHeight.offsetHeight
        const logoHeight = this.$refs.logoHeight.offsetHeight
        let logoHeights=logoHeight+'px'
        this.menuHeight = {height: 'calc(100vh - '+logoHeights+')'}
      
      })
    },