layout

介绍

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

对于Vue3的项目，可以使用@charrue/layout-next。Vue3的组件API与@charrue/layout完全一致。

下载

npm install element-ui @charrue/layout

使用

import ElementUI from "element-ui";
import Layout from "@charrue/layout";
import "element-ui/lib/theme-chalk/index.css";
import "@charrue/layout/dist/index.css";

Vue.use(ElementUI);
Vue.use(Layout);

通过 CSS 变量设置主题

我们对Layout组件中经常改动的样式属性使用了CSS 变量功能。

--charrue-header-height: 顶栏`.charrue-header`的高度
--charrue-title-font-size: 顶部标题的字体大小
--charrue-header-text-color：顶栏的文字颜色
--charrue-header-bg-color: 顶栏的背景颜色
--charrue-sidebar-border-color： 侧栏的右边框颜色
--charrue-sidebar-text-color: 侧栏导航菜单文字颜色
--charrue-sidebar-bg-color: 侧栏导航菜单文字背景颜色
--charrue-sidebar-hover-text-color: 侧栏导航菜单文字处于悬浮状态时的颜色
--charrue-sidebar-hover-bg-color: 侧栏导航菜单处于悬浮状态时的背景颜色
--charrue-sidebar-active-text-color: 侧栏导航菜单处于选中状态时的文字颜色，默认与charrue-sidebar-hover-text-color颜色一致
--charrue-sidebar-active-bg-color: 侧栏导航菜单处于选中状态时的文字颜色，默认与charrue-sidebar-hover-bg-color颜色一致
--charrue-sidebar-submenu-active-bg-color: 侧栏subMenu处于选中状态时的背景颜色

详细信息可见var.scss

你可以像这样对上述变量进行自定义：

:root {
  --charrue-sidebar-bg-color: #2c3643;
  --charrue-sidebar-hover-bg-color: #c16394;
  --charrue-sidebar-hover-bg-color: #e6a54e;
  --charrue-sidebar-active-bg-color: #222a34;
  --charrue-sidebar-text-color: #41b883;
  --charrue-sidebar-active-text-color: #fff;
  --charrue-sidebar-submenu-active-bg-color: #2a2d2e;
}

因为el-menu处于折叠状态时的DOM是在body下面的，如果想要将CSS的修改影响到它，则必须将自定义变量放置到html或body下。