@charrue/layout-next v1.0.5

layout-next

介绍

Charrue Layout 是基于Element Plus封装的组件，致力于解决中后台布局的问题，提供自动生成菜单与定制页面布局。

下载

npm install element-plus @charrue/layout-next

使用

1. 全局注册

import ElementPlus from "element-plus";
import Layout from "@charrue/layout-next";
import "element-plus/dist/index.css";
import "@charrue/layout-next/dist/index.css"; // 引入样式

const app = createApp(App);
app.use(Layout);

2. 局部注册

<script setup>
import { CharrueLayout } from "@charrue/layout-next";
</script>

<template>
  <CharrueLayout>
    <router-view></router-view>
  </CharrueLayout>
</template>

<style>
@import "@charrue/layout-next/dist/index.css";
</style>

Props

插槽

事件

辅助函数

• defineLayoutConfig

declare const defineLayoutConfig: (config: LayoutMenuItem[]) => LayoutMenuItem[];

在定义dataprop时提供类型提示

类型

interface LayoutMenuItem {
    title: string;
    path?: string;
    name?: string;
    icon?: string;
    children?: LayoutMenuItem[];
}

declare type ActiveMenuRulesType = Record<string, string | {
    name: string;
}>;