内容简介:改造完后效果略(日后再补充)
改造完后效果
eova 及 iview的部署
略(日后再补充)
菜单功能核心改造
- 优化
iview/src/router/router.js
import Main from '@/views/Main.vue'; ... import jquery from 'jquery';//引入jquery用于同步请求菜单栏 import Kit from '../libs/kit.js';//引入自定义适配器类 ... // 通过请求/menu接口获取eova菜单结构 let raw = jquery.ajax({ url: '/menu', type: 'GET', //GET async: false, //或false,是否异步 dataType: 'json', }).responseJSON; // 通过适配器将eova菜单变为适合vue-router的结构 const menu = Kit.adaptMenu(raw, Main); // 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里 export const appRouter = [...menu]; // 所有上面定义的路由都要写在下面的routers里 export const routers = [ loginRouter, otherRouter, preview, locking, ...appRouter,//引入路由 page500, page403, page404 ]; 复制代码
- 添加
iview/src/libs/kit.js
用于适配菜单
let Kit = {}; ... import webComponent from '@/views/main-components/web.vue';//引入用于读取页面iframe的组件 Kit.adaptMenu = (raw, Main) => { let menu = []; const rawMenu = raw; raw.forEach((item, index) => { //主菜单 if (item.parent_id == 0 && item.type == 'dir') {//判断是否根目录及父目录 let m = {}; m.id = item.id; m.path = "/" + item.code; m.meta = { type: 'dir' } m.name = item.code; m.title = item.name; m.component = Main;//使用父菜单组件 m.icon = 'folder'; function addChildren(parent) {//通过递归调用添加子菜单在每个菜单的children属性内 parent.children = []; // 直接打开链接 let children = rawMenu.filter(child => child.parent_id == parent.id && (child.link || child.type == 'dir')); if (children.length > 0) { children.forEach((child, index) => { let c = {}; c.id = child.id; c.path = "/" + child.code; c.name = child.code; c.title = child.name; c.meta = {//利用meta将链接信息传给路由 type: child.type, link: "" + child.link }; c.component = webComponent; parent.children.push(c); addChildren(c); }) } } addChildren(m); menu.push(m); } else if (item.parent_id == 0 && item.type == 'diy') {//如果是自定义菜单,直接跳转 let m = {}; m.id = item.id; m.path = "/" + item.code; m.meta = { type: item.type, link: item.link } m.name = item.code; m.title = item.name; m.component = Main; m.icon = 'folder'; m.children = []; menu.push(m); } }) return menu; } export default Kit; 复制代码
- 添加
iview/src/views/main-components/web.vue
用于打开iframe页面
<template> <!-- 配置界面 --> <Card> <div ref="div" style="height:600px"> <iframe :src="src" allowtransparency="true" style="border:0;width:100%;height:99.3%;" frameborder="0" @load="onload"></iframe> </div> </Card> </template> <script> export default { props: ["url", "height", "modal"], created() {}, mounted() { if (this.height) {//自定义适配高度 this.$refs.div.style.height = this.height + 'px'; } else if (this.modal) { this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 500) + "px"; } else { this.$refs.div.style.height = (this.$parent.$el.offsetHeight - 160) + "px"; } }, methods:{ onload(){ this.$refs.div.style.opacity = 1;//读取成功后显示内容 } }, computed: { src: function() { if (this.modal) { return this.modal.url; } if (this.$route) { return this.$route.meta.link;//自动读取路由的meta.link属性 } else if (this.url) { return this.url; } } }, watch:{ "src":function(value){ this.$refs.div.style.opacity = 0;//路由切换时隐藏内容 } } }; </script> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
C++Templates中文版
David Vandevoorde、Nicolai M.Josuttis / 陈伟柱 / 人民邮电出版社 / 2008-2 / 69.00元
本书是C++模板编程的完全指南,旨在通过基本概念、常用技巧和应用实例3方面的有用资料,为读者打下C++模板知识的坚实基础。 全书共22章。第1章全面介绍了本书的内容结构和相关情况。第1部分(第2~7章)以教程的风格介绍了模板的基本概念,第2部分(第8~13章)阐述了模板的语言细节,第3部分(第14~18章)介绍了C++模板所支持的基本设计技术,第4部分(第19~22章)深入探讨了各种使用模板......一起来看看 《C++Templates中文版》 这本书的介绍吧!