@thtf/prolayout

布局

依赖

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