ff-element v0.1.0-alpha.10

包含左侧菜单可伸缩顶部叶子菜单的菜单组件

使用方式 main.js 引用 文件放置 views 文件中

npm install ff-element import menuMain from 'ff-element' Vue.use(menuMain)

创建自己的主组件

menu-man Attributes 菜单数据格式

例句 views/layout/index.vue

<menuMain :menuHeaderName="'视频云平台'" :welcomePath="'/index/firstHome'">
    <template slot="headTitle">
    </template>
  </menuMain>
</template>

创建菜单配置 router/index.js(main.js 引用的文件)

import mainRouter from 'ff-element/lib/router/router' //创建主路由对象
const $mainRouter = mainRouter(VueRouter, Vue,option)

option 参数

路由 mainRouter 事件

  $mainRouter.getRoutes(menu,config)

getRoutes 参数

config 参数

路由具体配置例句

const $mainRouter = new mainRouter(VueRouter, Vue, {
  url: "/index",
  name: "/index",
  path: "/iframe/index",
  component: (resolve) => require([`@/views/layout/index.vue`], resolve),
});
let array = [].concat(staticRouter.childrenRouter, [])
const routes: Array<RouteConfig> = [
  ...staticRouter.mainRouter,
  ...$mainRouter.getRoutes(array, {
        label: 'label',
    }), //传静态菜单数据
];

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

菜单具体数据

meta 参数

菜单具体数据格式

const childrenRouter: any = [
    {
        path: '/app-vue',
        label: '子应用2',
        meta: {
            isMicro: true,
        },
        children: [],
    },
    {
        path: '/workbench/index',
        label: '工作台',
        component: (resolve) => require([`@e/views/workbench/index.vue`], resolve),
        children: [
            {
                path: '/notice/index',
                label: '代办',
                meta: {
                    isHidden: true,
                },
                component: (resolve) => require([`@e/views/notice/index.vue`], resolve),
                children: [
                    {
                        path: '/site/index',
                        meta: {
                            isHidden: true,
                        },
                        component: (resolve) => require([`@e/views/site/index.vue`], resolve),
                        label: '站点跳转',
                        children: [],
                    },
                ],
            },
        ],
    },
]
const mainRouter = [
    {
        path: '/',
        name: 'login',
        component: (resolve) => require(['@e/views//login/index.vue'], resolve),
    },
]
export default {
    mainRouter: mainRouter,
    childrenRouter: childrenRouter,
}

项目路由文件例句

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import menu from '@/views/iframe/api/menu.js' //菜单动态数据
import staticRouter from './staticRouter' //菜单静态路由
Vue.use(VueRouter)
const $mainRouter = new mainRouter(VueRouter, Vue, {
  url: "/index",
  name: "/index",
  path: "/layout/index",
  component: (resolve) => require([`@/views/layout/index.vue`], resolve),
});
let array = [].concat(staticRouter.childrenRouter, [])
const routes: Array<RouteConfig> = [
  ...staticRouter.mainRouter,
  ...$mainRouter.getRoutes(array, {
        label: 'label',
    }), //传静态菜单数据
];

const router = new VueRouter({
mode: 'hash',
base: process.env.BASE_URL,
routes,
})

export default router

菜单顶部右侧额外数据

<menuMain :menuHeaderName="'视频云平台'">
        <template slot="headTitle">
            <span class="sc_head-title">欢迎</span>
        </template>
    </menuMain>
<script lang="ts">
</script>