# vue-element-layout **Repository Path**: feiglex/vue-element-layout ## Basic Information - **Project Name**: vue-element-layout - **Description**: 基于VUE+ElementUI的布局、支持router tab - **Primary Language**: Unknown - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2022-01-14 - **Last Updated**: 2022-01-14 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # layouttest ## 介绍 一个基于VUE+ElementUI的布局案例,支持路由tab | ![经典布局](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/经典布局.jpg) | ![汉堡包布局](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/汉堡包布局.jpg) | ![](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/侧边栏布局.jpg) | | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | | **经典布局** | **汉堡包布局** | **侧边栏布局** | ## 功能 * 支持iframe嵌套 * 对外隐藏iframe真实地址 ```json { "id": "1003", "type": 1, "name": "百度", "parentId": "1001", "orderNum": 0, "icon": "", "path": "/baidu", "iframeUrl": "https://www.baidu.com", "component": "", "params": "", "disabled": false, "hide": false, "target": "_self", "wrapComponent": "0", "permissions": "", "keepAlive": false, "extendObj": null, "children": null, "parentName": null } ``` ```js // 通过路由访问百度 this.$router.push({path: '/baidu'}) ``` * 支持iframe传参 ```js // 通过路由访问百度 this.$router.push({path: '/baidu',query:{wd: 'hello',charset: 'utf8'}}) // 实际iframe地址为 https://www.baidu.com?wd=hello&charset=utf8 ``` * 支持vue路由和iframe缓存,当url改变时,重新执行生命周期 * 支持【经典布局】、【汉堡包布局】、【侧边栏布局】 | ![经典布局](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/经典布局.jpg) | ![汉堡包布局](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/汉堡包布局.jpg) | ![](https://gitee.com/xiaoka2017/vue-element-layout/raw/master/example_images/侧边栏布局.jpg) | | :----------------------------------------------------------: | :----------------------------------------------------------: | :----------------------------------------------------------: | | **经典布局** | **汉堡包布局** | **侧边栏布局** | * 支持路由router tab 开关关闭:根据路由自动生成tab、支持【刷新、关闭左边、关闭右边、关闭其他】 * 支持路由动态生成 * 支持按钮权限 ```vue 新增 ``` ## 运行 ``` bash # 安装依赖包 npm install # 启动 npm run dev ```