【动态调整首栏行高以实现上下居中】

最新推荐文章于 2024-05-08 17:20:15 发布

TWenYuan

最新推荐文章于 2024-05-08 17:20:15 发布

阅读量118

点赞数 1

分类专栏： javaScript vue 文章标签：前端

本文链接：https://blog.csdn.net/TWenYuan/article/details/125660637

版权

javaScript 同时被 2 个专栏收录

25 篇文章 0 订阅

订阅专栏

vue

19 篇文章 0 订阅

订阅专栏

本文介绍了一种方法，通过在Vue组件中利用Flex布局，并结合JavaScript动态调整首栏行高，实现元素在div内的上下居中显示。代码示例展示了如何遍历并设置每个按钮的高度，确保内容在视觉上保持垂直居中。

摘要由CSDN通过智能技术生成

动态调整首栏行高以实现上下居中

<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`
      }
    },
}