Skip to content
On this page

子应用导航菜单

微服务子应用通用的左侧导航菜单,可以自定义跳转方法,也可以自定义跳转前的钩子函数。

效果预览

示例代码

vue
<template>
  <div style="height: 350px; overflow: hidden; box-shadow: 0 0 8px #eee;">
    <BcSideMenu
      :menuData="menuData"
      :jumpMethod="jumpMethod"
      :beforeJump="beforeJump"
    />
  </div>
</template>

<script setup lang="ts">
import { BcSideMenu } from 'bdsaas-bc'
import { BnIconSearch } from 'blocks-next'

defineOptions({
  name: 'SideMenuDemo'
})

const menuData = [
  {
    groupName: '概况', // 组名称
    showGroup: true, // 是否显示组
    children: [
      {
        icon: h(BnIconSearch), // blocks-next Icon 图标名称(暂时只接收 VNode)
        title: '概况', // 菜单子项名称
        routeName: 'OverviewBi', // 跳转页面的 routeName
        showItem: true, // 是否显示组下面的菜单子项
        authKeys: ['a', 'b'], // 控制菜单展示的权限 key
        notice: true // boolean | number,true 则显示红点,数值则显示红点数字。默认值:false
      }
    ]
  },
  {
    groupName: '工作台',
    showGroup: true,
    children: [
      {
        icon: h(BnIconSearch),
        title: '通话记录',
        routeName: 'CallRecord',
        showItem: true,
        authKeys: [],
        notice: true
      }
    ]
  }
]

function jumpMethod(data: any) {
  console.log('自定义的跳转方法', data)
}

function beforeJump(to: any, from: any, next: (args: any) => void) {
  console.log(to, 'to to')
  console.log(from, 'from from')
  next({ name: 'NumberManagement' })
}
</script>

Props

属性名说明类型可选值默认值
menuData菜单数据GroupItem[]
authKeys权限数据string[]
beforeJump跳转之前的钩子(to, from, next) => void
jumpMethod自定义跳转方法(menuItem) => void

GroupItem

属性名说明类型可选值默认值
groupName组名称string
showGroup是否显示组boolean
children组下的菜单项集合MenuItem[]
属性名说明类型可选值默认值
iconblocks-next Icon 组件VNodeDefineComponent
title菜单子项名称boolean
routeName跳转页面的 routeNamestring
showItem是否显示组下面的菜单子项boolean
authKeys控制菜单展示的权限 keystring[]
notice布尔值:是否显示红点,数值:显示红点数字booleannumber