人人框架 侧边菜单栏修改大小,保留折叠效果

1,436 阅读1分钟

问题:侧边菜单栏有很多分级,子菜单缩进了,如果子菜单过长就会被挡住。
解决方案:用三目判断,根据sidebarFold的tf值来修改style,保留折叠的效果。
ps:折叠效果

<el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
  <el-radio-button :label="false">展开</el-radio-button>
  <el-radio-button :label="true">收起</el-radio-button>
</el-radio-group>

代码:
<el-submenu …… :style="{'min-width': (sidebarFold == true ? '64px':'224px')}">
</el-submenu>
<el-menu-item …… :style="{'min-width': (sidebarFold == true ? '64px':'224px')}">
  </el-menu-item>
  
<script>
export default {
  data () {
    return {
      sidebarFold: this.$store.state.sidebarFold
    }
}
</script>