如何优雅的封装element侧边栏（复制即用）

鼠标悬浮从右侧弹出子菜单 ：

<template>
  <div>
    <el-menu
      @select="handleSelect"
      :default-active="currentIndexLight"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      collapse
      :popper-append-to-body="true"
    >
      <div v-for="item in tabList" :key="item.pathh">
        <!-- 没有子菜单 -->
        <template v-if="!item.children">
          <el-menu-item :index="item.pathh">
<!--图标-->
            <!-- <i class="el-icon-menu"></i> -->
            {{ item.title }}
          </el-menu-item>
        </template>
        <!-- 有子菜单 -->
        <el-submenu v-else :index="item.pathh">
          <template slot="title">
            <!-- <i class="el-icon-menu"></i> -->
            {{ item.title }}
          </template>

          <template v-for="child in item.children">
            <!-- 递归循环 -->
            <sidebar-item
              v-if="child.children && child.children.length > 0"
              :item="child"
              :key="child.pathh"
            />
            <el-menu-item v-else :key="child.pathh" :index="child.pathh">
              <!-- <i class="el-icon-location"></i> -->
              {{ child.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  props: {
    tabList: Array,
    currentIndexLight: String,
  },
  methods: {
    handleSelect(e, x) {
      this.$emit('handleSelect',e,x)
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-menu--collapse {
  width: 185px !important;
}
</style>