vue element ui - menu改为侧边条(上图下文字)

说明

实现下图效果:

关键说明

el-menu-item 标签

<el-menu-item 增加 menu-item 类样式

并要指定 style="padding-left: 0;" ,否则有左内边距

图标

图标要增加 style="margin-right: 0px;" 样式,右外边距为0

文字

因为图标和文字是上下布局,所以文字使用 div 标签

完整代码

vue代码:

<el-menu
  class="el-menu-vertical-demo"
  @select="handleSelect">
  <el-menu-item index="text" class="menu-item" style="padding-left: 0;">
    <i class="el-icon-menu" style="margin-right: 0px;"></i>
    <div slot="title" >文字</div>
  </el-menu-item>
  <el-menu-item index="3" class="menu-item" style="padding-left: 0;">
    <i class="el-icon-document" style="margin-right: 0px;"></i>
    <div slot="title">模板</div>
  </el-menu-item>
  <el-menu-item index="4" class="menu-item" style="padding-left: 0;">
    <i class="el-icon-setting" style="margin-right: 0px;"></i>
    <div slot="title">上传图片</div>
  </el-menu-item>
</el-menu>

css代码:

.menu-item {
    height: 62px;
    text-align: center;
    line-height: 21px;
    padding: 10px 0;
    font-size: 12px;
}

原文出处:/show_1IX8SFBAeo4X.html