使用Vue实现手风琴菜单效果

最新推荐文章于 2024-09-04 15:37:14 发布

优资园

最新推荐文章于 2024-09-04 15:37:14 发布

阅读量7.5k

点赞数 2

分类专栏： ES5 Vue 文章标签： vue 手风琴菜单

本文链接：https://blog.csdn.net/zshsats/article/details/88561557

版权

本文将介绍如何利用Vue的指令和事件冒泡机制，实现手风琴菜单的效果。通过实例代码，详细讲解了关键步骤和注意事项，帮助开发者轻松创建交互式的手风琴菜单。

摘要由CSDN通过智能技术生成

使用vue的指令个事件冒泡委托给一个事件处理
在这里插入图片描述
使用

    <vertical-menu :menuList="dataList" :initIndex="0"  @fold-body="foldHandle" @go-state="goWhere"></vertical-menu>



 data() {
        return {
            isMin:false,
            dataList:[
                {
                    path: 'home',
                    name: '服务组件',
                    icon:"icon-shouye",
                    children:[

                        {
                            name: '通知组件',
                            path: 'layout',
                        },

                    ]
                },
                {
                    icon:"icon-shouye",
                    name: 'UI组件',
                    path: '',
                    children:[
                        {
                            name: '布局组件',
                            path: 'layout',
                        },
                        {
                            name: '按钮组件',
                            path: 'button',
                        },
                        {
                            name: '弹框组件',
                            path: 'modal',
                        },
                        {
                            name: '富文本',
                            path: 'editor',
                        }

                    ]
                },
                {
                    icon:"icon-shouye",
                    name: '通信组件',
                    path: '',
                    children:[