布局

依赖

Vue 2.6.14+

Vue-Router 3.5.4+

Element-UI 2.15.8+

svg-sprite-loader 6.0.11+

安装

npm install @thtf/prolayout

属性

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | --- | --- | --- | --- | --- | | device | 显示模式：手机、电脑 | String | desktop | desktop | | logoTitle | layout 的左上角 的 title | String | - | '' | | headerHeight | 顶部导航高度 | Number | - | 48 | | sideWidth | 左侧菜单栏宽度 | Number | - | 200 | | sideCollpaseWidth | 左侧菜单栏收缩宽度 | Number | - | 48 | | menuRoutes | 路由数组 | Array | - | [] | | predefine | 预设颜色 | Array | - | ['#2e59a7', '#80d1c8', '#0095b6', '#ff770f', '#1a7bb0'] | | settings | 布局配置 | Object | - | - | | showSettings | 是否显示配置 | Boolean | - | false |

menuRoutes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----------- | ------------------------ | ------- | ----------- | ---------- | | path | 路由路径 | String | | | | name | 路由的名字 | String | | | | component | 路由组件 | Vue | | | | hiddren | 路由是否隐藏 | Boolean | false, true | false | | alwaysShow | 路由是否总是显示 | Boolean | false, true | true | | redirect | 在面包屑导航中是否可点击 | String | | noRedirect | | query | 默认传递参数 | String | | | | roles | 访问路由的角色权限 | Array | | | | permissions | 访问路由的菜单权限 | Array | | | | meta | 路由元数据信息 | Object | | |

settings

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ------------------ | ----------------------------- | ------- | ------------------------------------ | ----------- | | sideTheme | 侧边栏风格 | String | theme-dark, theme-light, theme-image | theme-image | | showSideTheme | 显示侧边栏风格 | Boolean | true, false | false | | theme | 主题色 | String | - | #2E59A7 | | navMode | 导航模式 | String | aside, top, mix | mix | | fixedHeader | 是否固定顶部导航 | Boolean | true, false | true | | fixedSide | 是否固定侧边菜单 | Boolean | true, false | true | | autoMenu | 是否自动分割菜单 | Boolean | true, false | true | | thumbnailImages | 缩略图配置 | Array | | | | backgroundImage | 选中的缩略图 | String | | | | showHeader | 是否显示顶栏 | Boolean | true, false | true | | showSide | 是否显示菜单 | Boolean | true, false | true | | showLogo | 是否显示 Logo | Boolean | true, false | true | | showHeaderSideLogo | 是否显示顶栏、菜单、Logo 配置 | Boolean | true, false | false |

thumbnailImages

| 参数 | 说明 | 类型 | 可选值 | 默认值 | | ----- | -------------- | ------ | -------------------------------------- | ------ | | src | 图片路径 | String | | | | fit | 图片缩放配置 | String | contain, cover, fill, none, scale-down | | | color | 图片对应的颜色 | String | | |

插槽

| 名称 | 说明 | | ---------- | -------------------- | | logo | layout 的左上角 logo | | logoRender | layout 的左上角 | | rightMenu | 导航栏最右侧菜单区域 | | default | 默认插槽 |

发布流程

1. 更新版本号与记录文件

npm run release

2. 编译代码

npm run build

3. 登录(登录过可忽略)

npm login

4. 发布

npm publish