日常开发小技巧

动态使用icon

在element plus中动态使用icon，将icon添加到路由，读取icon到菜单项

const home = [
  {
    path: "/index",
    meta: {
        title:"首页"
    },
    icon: 'House',
    component: () => import('@/views/Home/index.vue')
  }
]

export default home;

页面读取icon

 <el-icon>
     <component :is="item.icon"></component>
 </el-icon>

这里使用的是动态组件，让多个组件使用同一个挂载点，根据条件动态切换，语法：

// import A from 'viewA'
// import B from 'viewB'
<component :is="A"></component>

menu折叠图标消失

消失的原因是因为加上了template标签，去除该标签即可

// <template #title>
  <el-icon>
      <component :is="item.icon"></component>
  </el-icon>
  <span>{{ item.meta.title }}</span>
// </template>

另外，在element menu中这个标签的作用是为了折叠菜单隐藏子项的，主项没必要使用<template #title>标签

修改el-menu菜单折叠后的悬浮菜单

使用官网的popper-class属性，在el-menu的el-sub-menu组件上设置

<el-menu>
    <el-sub-menu popper-class="popper_vertical"></el-sub-menu>
</el-menu>

然后在style上设置样式即可，注意style上不能加scope，因为悬浮菜单是全局的顶层弹窗，在组件之外。

<style>
/* 折叠菜单弹出的悬浮菜单 */
.popper_vertical {
  background: var(--dc-theme-menu-background);
  border: 0px;
}
// popper_horizontal{ ...... }
</style>

你可以通过设置popper-class类名来弹出菜单的动态样式切换。