Layout 布局

继承 Antd Layout的所有 Api

基本使用

内置 trigger 触发器

<template>
  <d-layout :sider="sider">
    <template #sider-header>
      <div class="logo" />
    </template>
    <template #header>layout-header</template>
    <template #body="{ breadcrumb }">
      <a-breadcrumb>
        <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{ item.title }}</a-breadcrumb-item>
      </a-breadcrumb>
      <router-view />
    </template>
  </d-layout>
</template>

<script>
export default {
  data() {
    return {
      sider: [
        {
          key: '1',
          title: 'subnav 1',
          icon: 'user',
          children: [
            {
              key: '1.1',
              title: 'option1',
              icon: 'user',
              path: '/iframe/layout-trigger/example-1'
            },
            {
              key: '1.2',
              icon: 'user',
              title: 'option2',
              path: '/iframe/layout-trigger/example-2'
            }
          ]
        },
        {
          key: '2',
          title: 'subnav 2',
          icon: 'team',
          children: [
            {
              key: '2.1',
              icon: 'team',
              title: 'option1',
              path: '/iframe/layout-trigger/example-21'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.logo {
  height: 32px;
  background: #d8d8d8;
  margin: 16px;
}
</style>

显示代码 复制代码 复制代码

自定义 trigger 触发器

<template>
  <d-layout v-model="collapsed" :sider="sider">
    <template #sider-header>
      <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="() => (collapsed = !collapsed)" />
    </template>
    <template #header>layout-header</template>
    <template #body="{ breadcrumb }">
      <a-breadcrumb :routes="breadcrumb">
        <template #itemRender="{ routes, route, paths }">
          <router-link v-if="routes.indexOf(route) === 0" :to="route.path">
            {{ route.title }}
          </router-link>
          <span v-else>
            {{ route.title }}
          </span>
        </template>
      </a-breadcrumb>
      <router-view />
    </template>
  </d-layout>
</template>

<script>
export default {
  data() {
    return {
      collapsed: false,
      sider: [
        {
          key: '1',
          title: 'subnav 1',
          icon: 'user',
          path: '/',
          children: [
            {
              key: '1.1',
              title: 'option1',
              icon: 'user',
              path: '/iframe/layout-custom-trigger/example-1'
            },
            {
              key: '1.2',
              icon: 'user',
              title: 'option2',
              path: '/iframe/layout-custom-trigger/example-2'
            }
          ]
        },
        {
          key: '2',
          title: 'subnav 2',
          icon: 'team',
          children: [
            {
              key: '2.1',
              icon: 'team',
              title: 'option1',
              path: '/iframe/layout-trigger/example-21'
            }
          ]
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.trigger {
  width: 100%;
  padding: 20px;
  color: #fff;
}
</style>

显示代码 复制代码 复制代码

属性

参数	说明	类型	默认值
v-model	当前收起状态，当没有该属性时，会显示内置的trigger	Boolean	-
sider	菜单配置	Array	-
theme	主题颜色	String: light dark	dark
menuProps	Menu 菜单项 props	Object	-
subMenuProps	Submenu 菜单项 props	Object	-
menuListeners	Menu 菜单项事件	Object	-
subMenuListeners	Submenu 菜单项事件	Object	-

事件

事件名称	说明	回调参数
collapse	展开-收起时的回调函数	Function(collapsed)

插槽

事件名称	说明	默认值
sider-header	侧边栏头部	-
header	右侧头部	-
body	右侧主体 slot-scope="{ breadcrumb }"	<router-view />