BDSaas BC

Appearance

On this page

子应用布局容器 ​

微服务子应用通用的主体布局容器，包含侧边栏、内容区域。

效果预览 ​

示例代码 ​

vue
<script setup lang="ts">
import { BcLayout } from 'bdsaas-bc'
import { ref } from 'vue'

defineOptions({
  name: 'LayoutDemo'
})

const menuData = []
const options = ref({
  menuData,
  showMenu: true
})
</script>

<template>
  <div style="width: 100%; height: 100%">
    <BcLayout :options="options">
      <div style="width: 600px; height: 600px; background: #646cff">
        内容区
        <br />
        <button @click="options.showMenu = !options.showMenu">
          showMenu: {{ options.showMenu }}
        </button>
      </div>
    </BcLayout>
  </div>
</template>

Props ​

属性名说明类型可选值默认值
menuData菜单数据Array——
authKeys权限数据Array——
beforeJump跳转之前的钩子(to, from, next) => void——
jumpMethod自定义跳转方法(menuItem) => void——
showMenu是否显示左侧菜单Boolean——