vue+iview-admin 利用适配器模式改造eova(伊娃管理后台)菜单及路由

栏目: jQuery · 发布时间: 6年前

内容简介:改造完后效果略(日后再补充)

改造完后效果

vue+iview-admin 利用适配器模式改造eova(伊娃管理后台)菜单及路由

eova 及 iview的部署

略(日后再补充)

菜单功能核心改造

  1. 优化 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
];
复制代码
  1. 添加 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;

复制代码
  1. 添加 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前端开发最佳实践

Web前端开发最佳实践

党建 / 机械工业出版社 / 2015-1 / 59.00元

本书贴近Web前端标准来介绍前端开发相关最佳实践,目的在于让前端开发工程师提高编写代码的质量,重视代码的可维护性和执行性能,让初级工程师从入门开始就养成一个良好的编码习惯。本书总共分五个部分13章,第一部分包括第1章和第2章,介绍前端开发的基本范畴和现状,并综合介绍前端开发的一些最佳实践;第二部分为第3-5章,讲解HTML相关的最佳实践,并简单介绍HTML5中新标签的使用;第三部分为第6-8章,介......一起来看看 《Web前端开发最佳实践》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

Markdown 在线编辑器
Markdown 在线编辑器

Markdown 在线编辑器

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具