Vue3:Elemenu-Plus递归型菜单组件封装(2)

这篇具有很好参考价值的文章主要介绍了Vue3:Elemenu-Plus递归型菜单组件封装(2)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

        在上一篇文章中,以Vue2的选项式 API风格,封装了递归型菜单组件,但是这其中存在着一些问题,例如:

        【1】子组件menuList.vue中,通过this.$emit()方式定义的事件,在Vue3组合式API风格父组件中可能会被执行多次。之所以说是可能,是因为我这测试中确实遇到了这个问题,子组件中确实只执行了一次,父组件中却执行了两次。

        【2】父子组件之间的props传值风格不同,vue3中,我们通常是通过defineProps API明确定义要传递的props属性,而Vue2中选项式API风格的组件,则直接可以通过export default导出的配置参数进行声明。这种不一致的写法在我写个人项目中,一向是不太赞同的。

         基于以上原因,我将上一篇文章《Vue:Elemenu-Plus递归型菜单组件封装》中的组件进行了改写,改为Vue3组合式API风格的组件,并对上述问题进行了解决。

        示例代码如下,

菜单子组件定义

        示例代码如下,

<!-- 多级菜单组件抽取 -->
<template>
    <el-menu :default-active="props.activeIndex" :class="props.customMenuClass" background-color="transparent"
        text-color="#fff" active-text-color="#ffef40" :mode="props.mode" @select="onSelect" :ellipsis="false">
        <template v-for="(item) in props.items">
            <template v-if="item.children">
                <el-sub-menu :index="item.index" popper-class="el-sub-menu-popper-class">
                    <template #title>
                        <router-link :to="item.path">
                            <el-icon>
                                <component :is="item.meta.icon" :size="24"></component>
                            </el-icon>
                            <span>{{ item.meta.title }}</span>
                        </router-link>
                    </template>
                    <!-- 直接使用文件名即可,不用考虑name的问题 -->
                    <!-- <menu-list :items="item.children" :mode="item.meta.mode" @select="onSelect"></menu-list> -->
                    <index :items="item.children" :mode="item.meta.mode" @select="onSelect"></index>
                </el-sub-menu>
            </template>
            <template v-else>
                <el-menu-item :index="item.index" :key="item.path">
                    <router-link :to="item.path">
                        <el-icon>
                            <component :is="item.meta.icon" :size="24"></component>
                        </el-icon>
                        <span>{{ item.meta.title }}</span>
                    </router-link>
                </el-menu-item>
            </template>
        </template>
    </el-menu>
</template>
<script setup>
import { toRef, watch } from 'vue'
//declare props from parent-component
const props = defineProps({
    customMenuClass: {
        type: String,
        required: false,
        default: "el-menu-class",
    },
    mode: {
        type: String,
        default: "horizontal",
    },
    items: {
        type: Array,
        required: true,
    },
    activeIndex: {
        type: String,
        required: false,
        default: "",
    }
})

//declare emtits by current-component
const emits = defineEmits(["select"])

//declare watch-calls
watch(() => props.activeIndex, (value, oldValue) => {
    console.log('新的activeIndex,', value)
})

//declare methods
const onSelect = (key, keyPath, item) => {
    emits("select", { value: true, key, keyPath, item })
}
</script>
<style lang="scss" scoped>
.el-menu-class {
    .el-menu-item:not(.is-disabled):hover {
        background-color: rgba(127, 255, 212, .3);
    }
}
</style>
<style lang="scss">
.el-sub-menu-popper-class {
    background-color: $base-background-color !important;
}
</style>

父组件调用

            <menu-list :items="menuList" :active-index="activeIndex" mode="horizontal" @select="clickHandler" />


//其中,clickHandler为emit方式定义的子组件事件,函数定义如下
const clickHandler = ({ value, key, keyPath, item }) => {
    console.log('clickHandler', value, key, keyPath)
    console.log("item-value", item)
}

        在此之上,我们还可以完成一些其他操作,例如:菜单路由切换的本地缓存,以保证每次进入项目主页时,路由会自动跳转到上一次操作的页面;结合后端API接口调用,实现真正意义上的动态菜单;通过自定义指令,实现前端页面操作的权限控制等等。文章来源地址https://www.toymoban.com/news/detail-549779.html

到了这里,关于Vue3:Elemenu-Plus递归型菜单组件封装(2)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3 + Element Plus 封装公共表格组件(带源码)

    由于项目中有很多菜单都是列表数据的展示,为避免太多重复代码,故将 Element Plus 的 Table 表格进行封装,实现通过配置展示列表数据 支持自动获取表格数据 支持数据列配置及插槽 支持操作列配置及插槽 支持多选框配置 支持表尾配置及插槽 支持分页显示 3.1 复制基本表格

    2024年02月08日
    浏览(86)
  • vue3+ts - element-plus封装上传文件图片组件

      近期做到的项目中有涉及到上传图片上传文件的需求,因为是pc管理后台,用到了element-plus框架,所以我也一起使用element-plus中的上传图片上传图片功能,并对它进行封装成一个组件,方便在多个地方使用。 1、上传文件、视频 2、上传图片   在这里上传图片和文件是分

    2024年02月12日
    浏览(51)
  • vue3学习——封装菜单栏

    @/Layout/Sidebar/index.vue @/Layout/Sidebar/Sidebar.vue

    2024年02月20日
    浏览(36)
  • (二) Vue3 + Element-Plus 实现动态菜单栏

    系列介绍:Vue3 + Vite + TS 从零开始学习 项目搭建:(一) Vue3 + Vite + TS 项目搭建 实现动态菜单栏:(二) Vue3 + Element-Plus 实现动态菜单栏 实现动态面包屑:(三) Vue3 + Element-Plus 实现动态面包屑 实现动态标签页:(四) Vue3 + Element-Plus 实现动态标签页 实现动态主题色切换(demo):(五)

    2023年04月23日
    浏览(57)
  • vue3 element-plus动态菜单及动态图标

    引入element-plus 注册图标组件 动态引入图标代码 完整代码 路由如下

    2024年01月18日
    浏览(45)
  • Vue3 - Element Plus 去除下拉菜单周围出现黑色边框轮廓,当用鼠标移入和点击聚焦时就会出现 “黑边“ 的情况,无论里面是什么 HTML 元素和组件都会由此问题(完美解决方案)

    在 Element Plus 组件库中,使用 dropdown 下拉菜单时鼠标点击或移入时周围出现黑色边框问题。 本文 实现了 vue3+element plus 项目开发中,隐藏下拉菜单 el-dropdown-menu / el-dropdown-item 周围的边框, 如下图所示,当鼠标移入(hover)和点击时就会围绕一圈黑色边框,但通过本文的方案

    2024年02月09日
    浏览(84)
  • Vue3 + Element Plus 实现动态标签页及右键菜单

    目录 先上图  使用el-dropdown绑定右键菜单,为每个tab页绑定一个右键 右键菜单生效后控制每个下拉项的禁用与显示(每一项代表一个功能) 每个右键项对应的功能  控制每次只显示一个右键 完整代码         只有首页的情况         多个tab页的情况  

    2024年02月07日
    浏览(47)
  • vue3.0+element Plus实现页面布局,侧边栏菜单路由跳转

    一. 先在router.js文件中配置路由,将侧边栏中需要跳转的页面都添加到children中 二. 在view目录下新建一个文件,里面包含侧边栏要跳转的页面 三.  页面样式布局 1. 我选择使用自定义组件BaseLayout.vue文件来设置header和aside样式显示 也可以使用element plus中的Container 布局容器 

    2024年02月13日
    浏览(49)
  • vue3 组件自己引用自己 递归组件 组件命名

    本人前端开发一枚,以前一直用vue2.0,为了更新自己掌握的技术学习如何使用vue3.0。 在vue3.0项目中想要实现菜单组件,要使用到递归组件的方法,发现不知道怎么给组件重命名!! 在vue2.0中想要实现递归组件方式很简单,只要给组件命名,然后自己调用即可: 然而在vue3.0中

    2024年02月06日
    浏览(48)
  • Vue3+elementPlus组件递归

    下面以实现导航菜单为例 1、父页面: 2、递归组件:

    2024年04月09日
    浏览(70)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包