说明
实现下图效果:
关键说明
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;
}
