快捷導(dǎo)航

vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例

更新時間：2020年09月26日 10:28:27 作者：認(rèn)真對待世界的小白

這篇文章主要介紹了vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

步驟很簡單：

通過動態(tài)綁定屬性給<el-main></el-main>綁定高度，而高度通過 innerHeight 獲取，減去你的頭部和底部高度，剩下的就是整個內(nèi)容區(qū)域的高度了！話不多說，上代碼

//defaultHeight是綁定的屬性
<el-main :style="defaultHeight">
  <router-view />
</el-main>
  
  
//注意：這里的defaultHeight必須是對象，不懂的可以去官網(wǎng)看下api
data() {
  return {
    defaultHeight: {
      height: ""
    }
  };
},
methods: {
  //定義方法，獲取高度減去頭尾
  getHeight() {
    this.defaultHeight.height = window.innerHeight - 90 + "px";
  }
},
created() {
  //頁面創(chuàng)建時執(zhí)行一次getHeight進(jìn)行賦值，順道綁定resize事件
  window.addEventListener("resize", this.getHeight);
  this.getHeight();
}

當(dāng)然，還可以通過CSS3計(jì)算高度

<style>
.el-main {
 height: calc(100vh - 70px);
}
</style>

以上就是vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的示例的詳細(xì)內(nèi)容，更多關(guān)于vue+elementUI 實(shí)現(xiàn)內(nèi)容區(qū)域高度自適應(yīng)的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章:

相關(guān)文章

Vue3使用customRef封裝防抖函數(shù)的方法詳解
防抖函數(shù)的作用是高頻率觸發(fā)的事件,在指定的單位時間內(nèi),只響應(yīng)最后一次,如果在指定的時間內(nèi)再次觸發(fā),則重新計(jì)算時間,本文將給大家詳細(xì)的介紹一下Vue3使用customRef封裝防抖函數(shù)的方法,需要的朋友可以參考下
2023-09-09
Vue中的 mixins 和 provide/inject詳解
這篇文章主要介紹了Vue中的 mixins 和 provide/inject詳解,本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-07-07
在vscode 中設(shè)置 vue模板內(nèi)容的方法
這篇文章主要介紹了在vscode 中設(shè)置 vue模板內(nèi)容的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-09-09
Vue聲明式渲染詳解
這篇文章主要介紹了Vue聲明式渲染詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-05-05
Vue body樣式修改方式
這篇文章主要介紹了Vue body樣式修改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-01-01
vue父子組件的互相傳值和調(diào)用
這篇文章主要介紹了vue父子組件的互相傳值和調(diào)用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下
2021-04-04
vue3中nextTick()應(yīng)用實(shí)例詳解
這篇文章主要給大家介紹了關(guān)于vue3中nextTick()應(yīng)用的相關(guān)資料,nextTick()等待下一次DOM更新刷新的工具方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-12-12
Element-UI中el-table如何合并相同單元格
這篇文章主要給大家介紹了關(guān)于Element-UI中el-table如何合并相同單元格的相關(guān)資料,el-table的組件的可以合并單元格,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2023-08-08
vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)
vue大屏項(xiàng)目開發(fā),客戶覺得地圖上的文字標(biāo)注太多了,要求地圖上只顯示省市等主要城市的標(biāo)注,這篇文章主要給大家介紹了關(guān)于vue3+高德地圖只展示指定市、區(qū)行政區(qū)域的地圖以及遮罩反向鏤空其他地區(qū)的相關(guān)資料,需要的朋友可以參考下
2024-02-02
在vue中使用vuex,修改state的值示例
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11