内容简介:改造完后效果略(日后再补充)
改造完后效果
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> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
RESTful Web Services Cookbook
Subbu Allamaraju / Yahoo Press / 2010-3-11 / USD 39.99
While the REST design philosophy has captured the imagination of web and enterprise developers alike, using this approach to develop real web services is no picnic. This cookbook includes more than 10......一起来看看 《RESTful Web Services Cookbook》 这本书的介绍吧!