Vue动态获取、设置组件高度
<template><el-row><el-col :span="24"><el-row ref="headerMenu" class="header-menu"><el-col :span="24"><el-menu router mode="horizontal"><el-menu-item index="1" ro
·
<template>
<el-row>
<el-col :span="24">
<el-row ref="headerMenu" class="header-menu">
<el-col :span="24">
<el-menu router mode="horizontal">
<el-menu-item index="1" route="/global-overview">全局概览</el-menu-item>
<el-menu-item index="2" route="/e-commerce-business">电商业务</el-menu-item>
<el-menu-item index="3" route="/douniao-business">抖鸟业务</el-menu-item>
<el-menu-item index="4" route="/administrative-business">行政业务</el-menu-item>
<el-menu-item index="5" route="/admin">管理员入口</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row ref="routerView">
<router-view></router-view>
</el-row>
</el-col>
</el-row>
</template>
<script>
export default {
name: "home-page",
mounted() {
/**
* when the component is hung, dynamically obtain the height of the header menu,
* and set this value to router view as margin top
*/
this.$refs.routerView.$el["style"].marginTop = `${this.$refs.headerMenu.$el["offsetHeight"]}px`;
}
}
</script>
<style scoped>
.header-menu {
position: fixed;
top: 0;
width: 100%;
z-index: 999;
}
</style>
更多推荐
已为社区贡献4条内容
所有评论(0)