@souche-f2e/souche-menu-partner

- docs - gitlab - changelog - issues - 紧急 Bug 联系人: 王春岩

菜单伴侣@modern: 新版菜单框架(iframe 版) 辅助工具, 以下简称 SMP

3.x 后不再兼容 @souche-ui/souche-menu-dashboard

@1.x 文档

@2.x 文档

支持 srp-main
如果你是一种新的菜单框架, 查看接入指南

测试在 iframe 中打开本页面

使用非常简单

安装

npm i @souche-f2e/souche-menu-partner --registry=http://registry.npm.souche-inc.com

使用

import {
    menuRouter
} from '@souche-f2e/souche-menu-partner';

/**
 * menuRouter 从 2.0 版本支持自动检测平台, 所有操作需要放在 ready 回调中执行
 */
menuRouter.ready((req) => { // req 为 2.x 新增, 表示接收上一个页面传递过来的数据
    // 在当前窗口打开链接, 兼容 1.x
    menuRouter.push('https://baidu.com');
    // 在新窗口打开链接, 兼容 1.x
    menuRouter.open('https://baidu.com');

    /**
     * 以下方法为 2.x 新增
     */

    /**
     * res 表示传递给下一个页面的数据
     * option 表示一些配置项, 目前只有 option.title 表示标签页标题
     */
    menuRouter.open('https://baidu.com', res, option);

    // 关闭当前窗口
    menuRouter.close();

    // 修改当前标签页标题
    menuRouter.title('自定义标题');
});

查看 API 文档 | 查看完整 API 列表

Feature 特点

menuRouter

当前页面在 iframe 内时, 使用 postmessage 通知菜单框架父页面进行页面跳转(或打开新窗口)
当前页面不在 iframe 内时, 退回基础方案进行页面跳转(或打开新窗口)
参数只需要传入子页面链接字符串, 无需关心是否需要菜单外壳前缀
支持 Vue plugin 形式使用

import Vue from 'vue';
import {
    menuRouter
} from '@souche-f2e/souche-menu-partner';

Vue.use(menuRouter, { router });

// 就可以直接使用
Vue.$menuRouter.ready(() => {
    Vue.$menuRouter.push('https://baidu.com');
    Vue.$menuRouter.open('https://baidu.com');
    Vue.$menuRouter.close();
});

// 或在 Vue 组件内使用, 可以免去放在 ready 里
this.$menuRouter.push('https://baidu.com');
this.$menuRouter.open('https://baidu.com');
this.$menuRouter.close();