内容简介:改造完后效果略(日后再补充)
改造完后效果
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> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Web前端开发最佳实践
党建 / 机械工业出版社 / 2015-1 / 59.00元
本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级工程师从入门开始就养成一个良好的编码习惯。本书总共分五个部分13章,第一部分包括第1章和第2章,介绍前端开发的基本范畴和现状,并综合介绍前端开发的一些最佳实践;第二部分为第3-5章,讲解HTML相关的最佳实践,并简单介绍HTML5中新标签的使用;第三部分为第6-8章,介......一起来看看 《Web前端开发最佳实践》 这本书的介绍吧!