动态调整首栏行高以实现上下居中
<div class="title-bar" style="display: flex;">
<el-button
text
v-for="menu in menus"
style="height: 100%;width: 25%;background-color:#1c1c46"
class="menu-button"
@click="$router.push(menu.url)"
>
<el-icon :size="32" style="color: #fff;">
<component :is="menu.icon"/>
</el-icon>
</el-button>
</div>
data(){
return{
menus: [
{ icon: 'message', url: '' },
{ icon: 'user', url: '' },
{ icon: 'setting', url: '/system' },
{ icon: 'right', url: '/login' },
],
}
}
mounted() {
this.adjustTitleLineHeight()
},
methods:{
adjustTitleLineHeight() {
const divs = document.getElementsByClassName('title-bar')
for (let i = 0; i < divs.length; i++) {
divs[i].style.lineHeight = `${divs[i].clientHeight}px`
}
},
}