快捷導(dǎo)航

詳解Vue3頁(yè)面如何自適應(yīng)表格滾動(dòng)高度

更新時(shí)間：2024年02月03日 09:40:39 作者：大陽(yáng)光男孩

這篇文章主要為大家詳細(xì)介紹了Vue3頁(yè)面如何自適應(yīng)表格滾動(dòng)高度,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

適用場(chǎng)景：在網(wǎng)頁(yè)的表格中我們需要獲取頁(yè)面的還可以用的高度來(lái)為表格做滾動(dòng)的時(shí)候就需要使用響應(yīng)高度，可以使用原生的calc來(lái)計(jì)算，但是calc有個(gè)缺陷就是，你要去計(jì)算多個(gè)盒子的高度，使用下面的代碼就可以直接獲取當(dāng)前元素到底部的距離，然后減去總高度即可，是相當(dāng)?shù)姆奖?。

TS端代碼：

import { ref , onMounted } from "vue";
 
/*
*
* Vue3計(jì)算剩余高度
*
*/
export default function () {
 
    //在Init的時(shí)候先行調(diào)用，然后在監(jiān)聽窗口的變化，保證是最新的寬高度
    onMounted(()=>{
        setWindowResize();
        window.addEventListener('resize',setWindowResize)
    });
 
    //測(cè)算基點(diǎn)
    let basePoint = ref();
 
    //元素測(cè)試盒子
    let elementWidth = ref(0);
 
    //窗口的高度
    let windowHeight = ref(0);
 
 
    const setWindowResize = function () {
        elementWidth.value = basePoint.value.getBoundingClientRect().top;
        windowHeight.value = window.innerHeight
    }
 
    return { basePoint , elementWidth , windowHeight };
}

頁(yè)面端代碼：

<script setup lang="ts">
  import useCommon from '@/common/useCommon';
 
  const  { basePoint , windowHeight , elementWidth } = useCommon();
 
 
</script>
 
<template>
   <div id="app">
     <div  style="height: 30px;background-color: rosybrown">{{ elementWidth }}</div>
     <div ref="basePoint"></div>
     <div :style="`height:calc( ${ windowHeight } - ${ elementWidth }px);background-color: tan`"></div>
   </div>
</template>
 
<style>
  html, body, #app {
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    background-color: rebeccapurple;
  }
</style>

運(yùn)行效果圖：

到此這篇關(guān)于詳解Vue3頁(yè)面如何自適應(yīng)表格滾動(dòng)高度的文章就介紹到這了,更多相關(guān)Vue3頁(yè)面自適應(yīng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能
這篇文章主要為大家介紹了vue2實(shí)現(xiàn)帶有阻尼下拉加載的功能示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
vue用addRoutes實(shí)現(xiàn)動(dòng)態(tài)路由的示例
本篇文章主要介紹了vue用addRoutes實(shí)現(xiàn)動(dòng)態(tài)路由的示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式)
這篇文章主要介紹了vue中展示、讀取.md?文件的方法(批量引入、自定義代碼塊高亮樣式),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-05-05
vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)瀑布流組件滑動(dòng)加載更多，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
淺談vue 單文件探索
這篇文章主要介紹了淺談vue 單文件探索，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
解決vue打包報(bào)錯(cuò)Unexpected token: punc的問(wèn)題
這篇文章主要介紹了解決vue打包報(bào)錯(cuò)Unexpected token: punc的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-10-10
elementui之封裝下載模板和導(dǎo)入文件組件方式
這篇文章主要介紹了關(guān)于elementui之封裝下載模板和導(dǎo)入文件組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
一篇文章帶你搞懂Vue虛擬Dom與diff算法
這篇文章主要給大家介紹了關(guān)于Vue虛擬Dom與diff算法的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
vue打包時(shí)不刪除dist里的原有文件配置方法
這篇文章主要為大家介紹了vue打包時(shí)不刪除dist里的原有文件配置方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-11-11