首页 > 其他分享 >动态给div赋值高,使页面高度100%

动态给div赋值高,使页面高度100%

时间:2023-12-22 11:56:05浏览次数:36  
标签:tableBoxHeight const 100% value resizeWindow computedTableBoxHeight div ref 页面

import { ref, onMounted, onUnmounted, computed, nextTick } from 'vue'

const boxRef = ref()
const searchBoxRef = ref()
const tableBoxHeight = ref(0)

const computedTableBoxHeight = () => {
  const searchBoxHeight = searchBoxRef.value.clientHeight // 获取DIV的高度
  const boxHeight = boxRef.value.clientHeight
  tableBoxHeight.value = boxHeight - searchBoxHeight - 10
}
const packUp = async () => {
  showSearchItem.value = !showSearchItem.value
  await nextTick()
  computedTableBoxHeight()
}
onMounted(() => {
  computedTableBoxHeight()
  window.addEventListener('resize', resizeWindow)
})
onUnmounted(() => {
  window.removeEventListener('resize', resizeWindow)
})
const resizeWindow = () => {
  computedTableBoxHeight()
}

 

标签:tableBoxHeight,const,100%,value,resizeWindow,computedTableBoxHeight,div,ref,页面
From: https://www.cnblogs.com/guwufeiyang/p/17921308.html

相关文章

  • 在div之前画一条连接线
    <html><head><style>div.boxItem{display:inline-block;border:1pxsolidblack;padding:1em;margin-right:5em;position:relative}.boxItem:before,.boxItem:after{content:......
  • 初中英语优秀范文100篇-034My Room-我的房间
    PDF格式公众号回复关键字:SHCZFW034记忆树1Weliveinathree-roomflat.翻译我们住在一个三居室的公寓。简化记忆公寓句子结构主语(We):表示句子中的主体,即说话者本人和听话者。谓语(live):表示主体所进行的动作或状态,这里是“居住”的意思。状语(inathree-roomflat):......
  • vue3 + xlsx 实现 excel 导入web页面解析成json数据
    vue3+xlsx实现excel导入web页面并解析成json数据fileIipt动态创建的标签,一定要用户点击事件触发,不然文件选择框的弹出会被拦截,无法弹出。意思就是下面这段关键代码要用一个事件区触发执行,不能主动执行(比如:vue的钩子)import*asXLSXfrom'xlsx'//v:"^0.18.5"letfil......
  • 陶建辉应邀参与 TOP100Summit,“工程师文化”演讲引发热议
    在AGI时代,数字化成为组织形态的重要特征,它可以帮助组织实现上下一致的目标和信息的高频传递,从而实现战略目标的协同和敏捷进化。在这样的大背景下,开发者们面临的实际挑战是如何避免技术和业务之间的割裂。12月14-17日,由msup和微上信息技术研究院联合主办的第十二届“TOP100......
  • uniapp返回上一个页面
    在UniApp中返回上一个页面,你可以使用 uni.navigateBack() 方法来实现。uni.navigateBack() 方法用于导航返回上一页,你可以传递一个可选的参数来指定返回的步数。如果不传递参数,则默认返回上一页。下面是一个示例代码,演示如何在UniApp中返回上一个页面:javascript复制代码......
  • [LeetCode Hot 100] LeetCode74. 搜索二维矩阵
    题目描述思路:二维矩阵坐标变换+二分查找二维矩阵坐标变换:只要知道二维数组的的行数m和列数n,二维数组的坐标(i,j)可以映射成一维的index=i*n+j;反过来也可以通过一维index反解出二维坐标i=index/n,j=index%n。(n是列数)把二维数组matrix的元素访问抽象成在......
  • [LeetCode] 1362. Closest Divisors 最接近的因数
    Givenaninteger num,findtheclosesttwointegersinabsolutedifferencewhoseproductequals num+1 or num+2.Returnthetwointegersinanyorder.Example1:Input:num=8Output:[3,3]Explanation:Fornum+1=9,theclosestdivisorsare3&......
  • 页面保活实现思路
    1.页面保活应用场景列表页面跳转到详情页面,要保留列表页面分页后的页码,搜索到的数据,搜索键值,高亮状态,甚至是页面上其他表单的内容等。2. 页面保活实现思路2.1不跳转用抽屉或模态框编辑详情,不离开列表页,最佳2.2vue单页面可以使用 <KeepAlive>组件缓存页面。配合KeepAli......
  • Codeforces Round 916 (Div. 3)
    目录写在前面ABCDE1/E2FG1G2写在最后写在前面比赛地址:https://codeforces.com/contest/1914。第二天没早八打个div3休闲娱乐保持下手感,然而div3都AK不了了,纯纯废物一个,天天上大学导致的。唉,一学期碰上好几个byd恼弹老师,大学一秒也不想上了,折磨。马娘台服马上1.5周......
  • 初中英语优秀范文100篇-033My Free Time-我的业余时间
    PDF格式公众号回复关键字:SHCZFW033记忆树1Ihavealotofthingstodoinmyfreetime.翻译我有很多空闲时间要做的事情。简化记忆事情句子结构主语(I):表示句子中的主体,即说话者本人。谓语(have):表示主体所进行的动作或状态,这里是“有”的意思。宾语(alotofthing......