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

news2024/11/18 9:34:52

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

  <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+')'}
      
      })
    },

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/517464.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【python数据分析】对python开发岗位需求进行分析可视化

前言 大家早好、午好、晚好吖 ❤ ~欢迎光临本文章 什么是数据分析 明确目的–获得数据(爬虫&#xff0c;现有&#xff0c;公开的数据)–数据预处理——数据可视化——结论 准备 环境使用&#xff1a; 在开始写我们的代码之前&#xff0c;我们要准备好运行代码的程序 Anacon…

空中下载技术(OTA)电控信息安全

随着汽车电子控制系统功能复杂度和数据颗粒度呈阶梯式增加&#xff0c;其发展速度逐渐超越网络安全防护方法、技术和标准的发展&#xff0c;现阶段汽车电子正面临巨大的网络信息安全风险&#xff0c;对功能安全的潜在影响也仍在探索和解决中&#xff0c;信息安全问题已经成为影…

maven从入门到精通 第五章 在IDEA2023中使用Maven

这里写自定义目录标题 一 Maven基础回顾1 archetype2 指定自己的maven工程所在的位置3 接下来是用文本编辑器打开自己下载的maven文件下的 conf >settings 二 创建maven子工程1 配置环境&#xff0c;测试运行2 打包maven的三种方式2.1 点击maven左侧的lifecycle2.2 点击m标签…

苹果录屏功能在哪?苹果如何进行屏幕录制?

案例&#xff1a;想知道苹果手机和苹果电脑的录屏功能在哪&#xff1f; 【用苹果手机和电脑很久了&#xff0c;但是我还是不知道它们的录屏功能在哪&#xff0c;如何使用&#xff1f;有没有小伙伴了解苹果的录屏功能&#xff1f;可以教教我吗&#xff1f;】 苹果手机和电脑自…

copilot 逆向

原文&#xff1a; copilot-explorer | Hacky repo to see what the Copilot extension sends to the server 对我来说&#xff0c;Github Copilot 极其有用。它经常能神奇地读懂我的想法并给出有用的建议。最让我惊讶的是&#xff0c;它能够从周围的代码中正确地“猜测”出函数…

Android 音频开发——Audio概览(八)

Audio 是 Android 系统中比较重要的一个模块,在 Android 中负责音频方面的数据流传输和控制功能,也负责音频设备的管理。 一、系统架构 Android 音频架构定义了音频功能的实现方式,并指出实现中所涉及的相关源代码。 应用框架 应用框架包含应用代码,该代码使用 android.me…

【分布式】分布式共识算法 --- RAFT

2.CAP原则 CAP原则又称CAP定理&#xff0c;指的是在一个分布式系统中&#xff0c;一致性&#xff08;Consistency&#xff09;、可用性&#xff08;Availability&#xff09;、分区容错性&#xff08;Partition tolerance&#xff09; It states, that though its desirable t…

【Google I/O 2023】PaLM2 大语言模型与 Bard 使用体验

欢迎关注【youcans的学习笔记】原创作品&#xff0c;火热更新中 【Google I/O 2023】PaLM2 大语言模型与 Bard 使用体验 1. PaLM2 大型语言模型1.1 谷歌发布 PaLM21.2 PaLM2 的功能与性能 2. 基于 PaLM2 的谷歌 AI 产品2.1 智能助手 Duet AI2.2 Gmail&#xff1a;帮我写邮件2.3…

【JMM】保证线程间的可见性,还只知道volatile?

本文目录 前言 举例&#x1f330; 情形1 int->Integer 情形2 System.out.println() 情形3 storeFence() 情形4 Thread.yield() 情形5 LockSupport.unpark() 情形6 增长循环内代码执行时间 总结分析 volatile分析 字节码解释器实现 模版解释器实现 其他情形…

利用腾讯云cos如何自建一个上传图片源站

目标总纲 对于一个新手来说&#xff0c;做一个东西&#xff0c;最困难的不是怎么做&#xff0c;而是做什么&#xff0c;接下来我会将任务进行拆分&#xff0c;让新手可以轻松"上路"。 在腾讯云上创建一个cos桶上传图片到cos桶在浏览器中如何访问图片&#xff08;开…

ChatGPT都有些什么好玩的玩法?

ChatGPT是一个智能聊天机器人&#xff0c;可以进行多种有趣的玩法&#xff0c;以下是其中一些&#xff1a; 1. 问答游戏&#xff1a;ChatGPT可以回答各种问题&#xff0c;你可以和它玩问答游戏&#xff0c;看看谁更聪明。 2. 聊天互动&#xff1a;ChatGPT可以进行自然语言聊天…

【C++STL】AVL树(更新中)

前言 二叉搜索树是具有特殊存储结构的树&#xff0c;任意根节点的左子树的所有节点值都比根节点的值小&#xff0c;右子树的所有节点值都比根节点大。 这种特殊的存储结构使得查找的效率大大提升&#xff0c;为logN。但是还有缺陷。 因为二叉搜索树的构建是一个节点一个节点的…

MySQL中去重 distinct 和 group by 是如何去重的

1&#xff1a;测试数据 CREATE TABLE student (stu_no VARCHAR(40) NOT NULL,name VARCHAR(100) NOT NULL );insert into student values(1,name1); insert into student values(2,name2); insert into student values(3,name1); insert into student values(4,name2); i…

【C++初阶】:类与对象(下)

类与对象 一.再谈构造函数1.初始化列表&#xff08;构造函数的一部分&#xff09;2.explicit关键字 二.static成员三.友元1.友元函数2.友元类 四.内部类五.匿名对象六.再次理解类与对象 一.再谈构造函数 1.初始化列表&#xff08;构造函数的一部分&#xff09; 我们可以直接在…

2023数维杯ABC题思路代码分析

已完成全部可以领取&#xff0c;详情看文末&#xff01;&#xff01;&#xff01; 数维杯A题思路 A题是这次比赛比较难的题目&#xff0c;地下水系统水体污染问题&#xff0c;他给出了我们一些行为特征&#xff0c;污染物的行为特征主要涉及对流迁移、水动力弥散、吸附及阻滞…

一、走进easyUI的世界

1.什么是easyUI&#xff1f; jQuery EasyUI是一组基于jQuery的UI插件集合体&#xff0c;而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript&#xff0c;也不需要对css样式有深入的了解&#xff0c;开发者需要…

matlab实验三程序设计与优化

一、实验目的及要求 一、实验的目的与要求 1、掌握 MATLAB的函数 2、掌握 MATLAB的程序流 3、掌握 MATLAB脚本和函数文件的编写 4、熟悉基于矩阵的程序设计与优化 二、实验原理 1、MATLAB的M文件&#xff1a;脚本文件与函数文件&#xff1b; 2、MATLAB程序流&#xff1a;input…

【企业信息化】第2集 免费开源ERP: Odoo 16 销售管理系统

文章目录 前言一、概览二、使用功能1.通过清晰报价提高销售效率2.创建专业报价单3.管理订单及合同4.简化沟通5.维护产品&价格6.直观的报告7.集成 三、总结 前言 世界排名第一的免费开源ERP: Odoo 16 销售管理系统。通过Odoo Sign应用程序和在线支付&#xff0c;发送报价。…

“极乐净土”时隔7年再度席卷B站,二次元魂藏不住了!

七年前&#xff0c;日本知名歌手美依礼芽发行一曲《极乐净土》&#xff0c;搭配歌曲的宅舞视频燃起了众多二次元魂&#xff0c;翻跳投稿纷至沓来。 可以说&#xff0c;她是许多老二次元人的回忆&#xff0c;也是一个时代的标记。 当时&#xff0c;《极乐净土》横空出世&#…

为什么需要边缘计算?哪些场景需要边缘计算?

为什么需要边缘计算&#xff1f; 边缘计算&#xff08;Edge Computing&#xff09;是一种将数据处理和计算功能移到接近数据源头的边缘设备上进行的计算模式。相比传统的云计算模式&#xff0c;边缘计算能够在接近数据源头的地方进行实时的数据处理&#xff0c;这为计算机视觉…