Vue 2 版本的 Ant Design Pro Layout

这是一个基于 Vue 2 和 Ant Design Vue 1.7.8 的布局系统，完全兼容 Vue 2 项目。

特性

• 🎨 支持多种布局模式：侧边菜单、顶部菜单、混合菜单
• 🌈 支持多种主题：亮色、暗色、反色
• 📱 支持响应式设计，适配移动端
• 🎯 支持菜单权限控制
• 🔄 支持菜单状态管理
• 🎉 支持多标签页
• 🌍 支持国际化
• 🎨 支持主题定制
• 📦 支持按需加载

安装

npm install mk-layouts-vue2
# 或者
yarn add mk-layouts-vue2

使用

全局注册

import Vue from 'vue'
import Antd from 'ant-design-vue'
import ProLayout from 'mk-layouts-vue2'
import 'ant-design-vue/dist/antd.less'
import 'mk-layouts-vue2/src/styles/index.less'

Vue.use(Antd)
Vue.use(ProLayout)

局部注册

import { BasicLayout } from 'mk-layouts-vue2'

export default {
  components: {
    BasicLayout
  }
}

基础用法

<script>
export default {
  data() {
    return {
      collapsed: false,
      theme: 'light',
      layout: 'mix',
      menuData: [
        {
          path: '/dashboard',
          name: 'dashboard',
          title: '仪表盘',
          icon: 'dashboard'
        },
        {
          path: '/form',
          name: 'form',
          title: '表单页',
          icon: 'form',
          children: [
            {
              path: '/form/basic',
              name: 'basic',
              title: '基础表单'
            },
            {
              path: '/form/step',
              name: 'step',
              title: '分步表单'
            }
          ]
        }
      ]
    }
  },
  methods: {
    handleCollapsed(collapsed) {
      this.collapsed = collapsed
    }
  }
}
</script>

<template>
  <pro-basic-layout
    :menu-data="menuData"
    :collapsed="collapsed"
    :theme="theme"
    :layout="layout"
    @update:collapsed="handleCollapsed"
  >
    <template #headerActions>
      <a-dropdown>
        <a class="ant-dropdown-link" @click="e => e.preventDefault()">
          Hover me <a-icon type="down" />
        </a>
        <template #overlay>
          <a-menu>
            <a-menu-item>
              <a href="javascript:;">1st menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">2nd menu item</a>
            </a-menu-item>
            <a-menu-item>
              <a href="javascript:;">3rd menu item</a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
    </template>
    <router-view />
  </pro-basic-layout>
</template>

API

BasicLayout Props

| 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | menuData | 菜单数据 | MenuDataItem[] | [] | | collapsed | 是否折叠 | boolean | false | | theme | 主题 | 'light' \| 'dark' \| 'inverted' | 'light' | | layout | 布局模式 | 'side' \| 'top' \| 'mix' | 'mix' | | fixedHeader | 是否固定头部 | boolean | false | | fixedSider | 是否固定侧边栏 | boolean | true | | splitMenus | 是否分割菜单 | boolean | false | | menuHeader | 是否显示菜单头部 | boolean | true | | header | 是否显示头部 | boolean | true | | footer | 是否显示底部 | boolean | true | | menu | 是否显示菜单 | boolean | true | | contentWidth | 内容区域宽度 | 'Fluid' \| 'Fixed' | 'Fluid' | | copyright | 版权信息 | string | '' | | logo | logo | string | '' | | title | 标题 | string | '' | | accordionMode | 是否手风琴模式 | boolean | false | | leftCollapsed | 是否左侧折叠 | boolean | false | | headerHeight | 头部高度 | number | 48 |

Events

| 事件名 | 说明 | 回调参数 | | --- | --- | --- | | update:collapsed | 折叠状态改变时触发 | (collapsed: boolean) => void | | update:openKeys | 展开的菜单项改变时触发 | (openKeys: string[]) => void | | update:selectedKeys | 选中的菜单项改变时触发 | (selectedKeys: string[]) => void | | menuSelect | 菜单项被选中时触发 | (data: MenuSelectEvent) => void |

Slots

| 名称 | 说明 | | --- | --- | | headerActions | 头部操作区 | | headerContent | 头部内容区 | | footerRender | 底部渲染 | | renderFooterLinks | 底部链接渲染 |

开发

# 安装依赖
npm install

# 开发
npm run dev

# 构建
npm run build

许可证

MIT