vue+elementUI 實現內容區域高度自適應的示例
阿新 • • 發佈:2020-09-28
步驟很簡單:
通過動態繫結屬性給<el-main></el-main>繫結高度,而高度通過 innerHeight 獲取,減去你的頭部和底部高度,剩下的就是整個內容區域的高度了!話不多說,上程式碼
//defaultHeight是繫結的屬性 <el-main :style="defaultHeight"> <router-view /> </el-main> //注意:這裡的defaultHeight必須是物件,不懂的可以去官網看下api data() { return { defaultHeight: { height: "" } }; },methods: { //定義方法,獲取高度減去頭尾 getHeight() { this.defaultHeight.height = window.innerHeight - 90 + "px"; } },created() { //頁面建立時執行一次getHeight進行賦值,順道繫結resize事件 window.addEventListener("resize",this.getHeight); this.getHeight(); }
當然,還可以通過CSS3計算高度
<style> .el-main { height: calc(100vh - 70px); } </style>
以上就是vue+elementUI 實現內容區域高度自適應的示例的詳細內容,更多關於vue+elementUI 實現內容區域高度自適應的資料請關注我們其它相關文章!