vue-antd-layout

基于antd快速搭建中台前端的layout
385
vite vue3 antd layout
Install
npm install vue-antd-layout
Latest Version:0.2.0
Vue:3
Older releases:2
License:MIT
Last Updated:Dec 25, 2024
Links: GitHub  ·  npm
Maintainer: zhangzhi93

使用

建议使用vue-cli@3.0以上版本创建一个项目，使用前请确保已安装vue和ant-design-vue

npm i vue-antd-layout --save
// or
yarn add vue-antd-layout

import { VueAntdLayout } from 'vue-antd-layout';

Vue.use(VueAntdLayout);

 <vue-antd-layout :menu-data="data"></vue-antd-layout>

API

参数 说明 类型 默认值
menu-data 左侧菜单数据，树状结构 Array []
layout layout布局 'sidemenu' -
logo 左上角图标 String -
title 左上角标题 String -
isCollapse 左侧菜单是否可折叠 Boolean true
collapse 设置菜单收起展开 Boolean false
defaultActive 选中的菜单key String -
defaultOpeneds 默认打开的菜单key String -
uniqueOpened 菜单手风琴模式 Boolean true
showFooter 是否展示页脚 Boolean true
onMenuHeaderClick menu 菜单的头部点击事件 event -
menuHeader 自定义slider logo slot -
asideExtra 在slider菜单底部追加dom slot -
header 自定义Header slot -
collapsedButton 自定义折叠按钮 slot -
rightContent 自定义头部右侧dom slot -
navTabs 自定义导航tabs slot -
footer 自定义页脚 slot -

说明

使用antd Menu 的api :

  • unique-opened
  • default-active
  • default-active
  • default-openeds

menu-data 数据格式 ：

[{
  "name": "level1",
  "title": "一级菜单",
  "icon": "el-icon-eleme",
  "children": [{
    "name": "level2-0",
    "title": "二级菜单",
    "icon": "el-icon-eleme",
    "children": [{
      "name": "level3",
      "title": "三级菜单",
      "icon": "el-icon-eleme",
    }]
  },{
    "name": "level2-1",
    "title": "二级菜单",
    "icon": "el-icon-eleme",
  }],
},{
  "name": "level1-1",
  "title": "一级菜单",
  "icon": "el-icon-eleme",
}]

Related Packages

vite-plugin-vue2

Vite plugin for Vue2

1,474,659 618
vite vue2
@vue-vine/vite-plugin

Official Vite plugin for Vue Vine

95,680 1,442
vite vue
vite-plugin-git-revision

Vite plugin that generates VERSION and COMMITHASH files during build based on a...

21,961 11
vite vue2
vite-plugin-resolve-extension-vue

A temporary workaround for issue No loader is configured for ".vue"

6,993 5
vite vue
@koala/yibin-ui

宜宾大脑主题定制

4,077
vite vue2

Version History

Version Released Vue License
0.2.0 ^3.2.47 MIT
0.1.4 ^2.6.14 MIT
0.1.3 ^2.6.14 MIT
0.1.2 ^2.6.14 MIT
0.1.1 ^2.6.14 MIT