@charrue/layout/package.json

基于vue2与element-ui, 解决中后台布局的问题，提供自动生成菜单与定制页面布局, 提供自动生成菜单与定制页面布局

{
  "name": "@charrue/layout",
  "version": "0.6.0",
  "description": "基于vue2与element-ui, 解决中后台布局的问题，提供自动生成菜单与定制页面布局, 提供自动生成菜单与定制页面布局",
  "keywords": [
    "layout",
    "element-ui",
    "vue",
    "charrue"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/charrue/charrue-layout.git",
    "directory": "packages/layout"
  },
  "license": "MIT",
  "main": "dist/index.js",
  "jsdelivr": "dist/index.js",
  "unpkg": "dist/index.js",
  "module": "dist/index.mjs",
  "files": [
    "dist",
    "README.md"
  ],
  "devDependencies": {
    "@charrue/layout-internal": "0.4.2",
    "@charrue/vue2-bundler": "^0.0.6",
    "vue": "2.6.14"
  },
  "peerDependencies": {
    "element-ui": "*",
    "vue": "2"
  },
  "scripts": {
    "build": "vue2-bundler"
  },
  "readme": "![](https://raw.githubusercontent.com/ckangwen/image-host/main/images/charrue-layout.svg)\n\n## layout\n ![](https://img.shields.io/npm/dt/@charrue/layout.svg)\n ![](https://img.shields.io/npm/v/@charrue/layout.svg)\n\n### 介绍\nCharrue Layout 是基于Element UI封装的组件，致力于解决中后台布局的问题，提供自动生成菜单与定制页面布局。\n\n对于Vue3的项目，可以使用`@charrue/layout-next`。Vue3的组件API与`@charrue/layout`完全一致。\n\n### 下载\n\n``` bash\nnpm install element-ui @charrue/layout\n```\n\n### 使用\n\n``` js\nimport ElementUI from \"element-ui\";\nimport Layout from \"@charrue/layout\";\nimport \"element-ui/lib/theme-chalk/index.css\";\nimport \"@charrue/layout/dist/index.css\";\n\nVue.use(ElementUI);\nVue.use(Layout);\n```\n\n### 通过 CSS 变量设置主题\n我们对Layout组件中经常改动的样式属性使用了CSS 变量功能。\n\n```\n--charrue-header-height: 顶栏`.charrue-header`的高度\n--charrue-title-font-size: 顶部标题的字体大小\n--charrue-header-text-color：顶栏的文字颜色\n--charrue-header-bg-color: 顶栏的背景颜色\n--charrue-sidebar-border-color： 侧栏的右边框颜色\n--charrue-sidebar-text-color: 侧栏导航菜单文字颜色\n--charrue-sidebar-bg-color: 侧栏导航菜单文字背景颜色\n--charrue-sidebar-hover-text-color: 侧栏导航菜单文字处于悬浮状态时的颜色\n--charrue-sidebar-hover-bg-color: 侧栏导航菜单处于悬浮状态时的背景颜色\n--charrue-sidebar-active-text-color: 侧栏导航菜单处于选中状态时的文字颜色，默认与charrue-sidebar-hover-text-color颜色一致\n--charrue-sidebar-active-bg-color: 侧栏导航菜单处于选中状态时的文字颜色，默认与charrue-sidebar-hover-bg-color颜色一致\n--charrue-sidebar-submenu-active-bg-color: 侧栏subMenu处于选中状态时的背景颜色\n```\n详细信息可见[`var.scss`](https://github.com/charrue/charrue-layout/blob/master/packages/layout-internal/styles/var.scss)\n\n你可以像这样对上述变量进行自定义：\n``` css\n:root {\n  --charrue-sidebar-bg-color: #2c3643;\n  --charrue-sidebar-hover-bg-color: #c16394;\n  --charrue-sidebar-hover-bg-color: #e6a54e;\n  --charrue-sidebar-active-bg-color: #222a34;\n  --charrue-sidebar-text-color: #41b883;\n  --charrue-sidebar-active-text-color: #fff;\n  --charrue-sidebar-submenu-active-bg-color: #2a2d2e;\n}\n```\n> 因为`el-menu`处于折叠状态时的DOM是在`body`下面的，如果想要将CSS的修改影响到它，则必须将自定义变量放置到`html`或`body`下。\n"
}