vue3.0项目实战系列文章 - 菜单的实现及icon组件封装

目录

一、先看下实现效果，然后注意几点

 二、二次封装图标组件

三、menu文件

---

一、先看下实现效果，然后注意几点

• 图标是动态变化的，需要二次封装组件实现
• 写法与vue2有所区别 

 二、二次封装图标组件

• 图标是动态变化的，需要二次封装组件实现 
• 注意引入的版本及写法，我引入的是"element-plus": "^2.2.13"，以作参考

1.路径：src>components>modules>icon.vue

2.main.js引入，注意与vue2.0有所区别

//全局使用方法  vue2.0:Vue.component('el-icons', icons)
//图标
import icons from '@/components/modules/icon.vue'
app.component('el-icons', icons)   //使用时候元素的名称,进行注册的组件名

 3.icon.vue

<template>
  <el-icon :size="size" :color="color">
    <component :is="name"></component>
  </el-icon>
</template>

<script>
import { ref, defineComponent } from "vue";
import * as Icons from '@element-plus/icons-vue'
// import * as ElementPlusIconsVue from '@element-plus/icons-vue'
export default defineComponent({
  components: Icons,
  name: "ElIcons",
  props: {
    name: {
      type: String,
      required: true,
    },
    size: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "",
    },
  },
});
</script>

4.使用

<el-icons :name="item.icon"  />

三、menu文件

1.源文件

<template>
    <div class="sidebar">
        <el-menu class="sidebar-el-menu" :default-active="onRoutes" :collapse="collapse" text-color="#333333"
            active-text-color="#20a0ff" unique-opened router>
            <template v-for="item in items">
                <template v-if="item.subs">
                    <el-submenu :index="item.index" :key="item.index">
                        <template #title>
                            <el-icons :name="item.icon"  />
                            <span>{{ item.title }}</span>
                        </template>
                        <template v-for="subItem in item.subs" :key="subItem.index">
                            <el-submenu v-if="subItem.subs" :index="subItem.index">
                                <template #title>{{ subItem.title }}</template>
                                <el-menu-item v-for="(threeItem, i) in subItem.subs" :key="i" :index="threeItem.index">
                                    {{ threeItem.title }}</el-menu-item>
                            </el-submenu>
                            <el-menu-item v-else :index="subItem.index">{{ subItem.title }}
                            </el-menu-item>
                        </template>
                    </el-submenu>
                </template>
                <template v-else>
                    <el-menu-item :index="item.index" :key="item.index">
                            <el-icons :name="item.icon"  />
                        <template #title>{{ item.title }}</template>
                    </el-menu-item>
                </template>
            </template>
        </el-menu>
    </div>
</template>

<script lang="ts" setup>
    import {
        computed,
        watch
    } from "vue";
    import {
        useStore
    } from "vuex";
    import {
        useRoute
    } from "vue-router";

    const items = [{
            icon: "HomeFilled",
            index: "/role",
            title: "角色管理",
        }, {
            icon: "Menu",
            index: "/menu",
            title: "菜单管理",
        },
        {
            icon: "Tools",
            index: "/jurisdiction",
            title: "权限管理",
        },
    ] as any[];

    const route = useRoute();

    const onRoutes = computed(() => {
        return route.path;
    });

    const store = useStore();
    const collapse = computed(() => store.state.collapse);
</script>

<style scoped>
    .sidebar {
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom: 0;
        overflow-y: scroll;
    }

    .sidebar::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-el-menu:not(.el-menu--collapse) {
        width: 250px;
    }

    .sidebar>ul {
        height: 100%;
    }
</style>

修改样式：创建elementUi.css

main.js引入

 elementUi.css：

/* 导航菜单 */
/* 移动背景色 */
.el-menu-item:hover {
  background-color: #CBE6F5 !important;
  color: #20a0ff!important;
}
.el-menu-item:hover i {
  color: #20a0ff!important;
}
.el-menu-item i {
  color: #909399;
  margin-right: 5px;
  width: 24px;
}
/* 子菜单 */
.el-submenu .el-menu-item {
  background-color: #F9F9F9;
  color: #666666!important;
}
.el-menu-item.is-active{
  background-color: #CBE6F5;
  color: #20a0ff!important;
}