阅读(728) (11)

CRMEB v4 前端配置说明

2022-03-29 12:30:58 更新

业务配置

除了 setting.env.js 配置外,还有另外一个配置,即src/setting.js配置,基本上绝大部分的配置都在这个文件里完成。使用者可根据自己的 UI 习惯来修改不同的配置,从而实现不同的布局效果。

详细的配置介绍如下:

基础配置

  • titleSuffix:网页标题的后缀,配置后,每个页面的标题都会带有后缀,比如 “业务配置 - iView Admin Pro”,为空则不显示后缀
  • routerMode:路由模式,可选值为 history 或 hash,默认为history
  • 2.2.0routerBase:应用的基路径。例如,如果整个单页应用服务在 /app/ 下,然后 routerBase 就应该设为 ‘/app/‘。默认为/
  • showProgressBar:页面切换时,是否显示模拟的进度条,默认为true
  • apiBaseURL:统一的接口请求地址,可根据当前环境配置不同的值
  • modalDuration:接口请求返回错误时,弹窗的持续时间,单位:秒,默认3
  • errorModalType:接口请求返回错误时,弹窗的类型,可选值为 Message 或 Notice,默认Message
  • cookiesExpires:Cookies 默认保存时间,单位:天,默认1

多语言配置1.2.0

  • i18n:
    • default:默认语言,默认为简体中文,值为zh-CN
    • auto:是否根据用户电脑配置自动设置语言(仅第一次有效),默认false

布局配置

  • menuSideWidth:侧边菜单宽度,单位 px,不可动态修改,如若修改,需同时修改src/styles/setting.less文件的 @menuSideWidth 且数值保持一致,默认256

  • layout:布局配置,如下:
    • siderTheme:侧边栏风格,可选值为 dark 或 light,默认dark
    • headerTheme:顶栏风格,可选值为 light、dark 或 primary,默认light
    • headerStick:顶栏是否置顶,开启后顶栏会覆盖在侧边栏之上,需开启 headerFix,默认false,建议在有顶级菜单时使用
    • tabs:是否开启多 Tabs 页签,默认true
    • showTabsIcon:多 Tabs 页签是否显示图标,开启 tabs 时有效,默认true
    • tabsFix:是否固定多 Tabs 多页签,开启 tabs 时有效,默认true
    • 2.2.0tabsReload:再次点击 Tabs 当前页签时,是否重载当前页面,默认false
    • siderFix:是否固定侧边栏,默认true
    • headerFix:是否固定顶栏,默认true
    • headerHide:是否在下滑时隐藏顶栏,需开启 headerFix,如果开启了 tabsFix,Tabs 也会被隐藏,默认false
    • headerMenu:是否显示顶部菜单栏,一般来说,侧边的菜单栏足以满足大部分业务,如需动态切换侧边栏,可开启此选项启用顶部一级菜单,此时侧边栏将作为二级菜单,默认false
    • menuAccordion:侧边菜单栏是否开启手风琴模式,默认true
    • showSiderCollapse:是否显示折叠侧边栏按钮,移动端下会自动强制开启,默认true
    • menuCollapse:侧边菜单栏是否默认折起,默认false
    • 2.2.0menuSiderReload:再次点击当前侧边菜单时,是否重载当前页面,默认false
    • 2.2.0menuHeaderReload:再次点击当前顶部菜单时,是否重载当前页面,默认false
    • 1.2.0showCollapseMenuTitle:侧边菜单折起时,是否在子菜单前显示父级菜单名称,默认false
    • 1.2.0showReload:是否显示重载按钮,默认true
    • showSearch:是否显示搜索,默认true
    • showNotice:是否显示通知,默认true
    • showFullscreen:是否显示全屏,默认true
    • showMobileLogo:在手机访问时,是否在顶部显示小尺寸 logo,默认true
    • showBreadcrumb:是否显示全局面包屑,开启 headerMenu 时不可用(如若在开启 headerMenu 时显示,可以在页面中的 PageHeader 使用该组件)
    • showBreadcrumbIcon:全局面包屑是否显示图标,开启 showBreadcrumb 时有效,默认false
    • showLog:是否显示日志入口,开启与否,不影响日志记录,如不希望用户看到可关闭,默认true
    • 1.2.0showI18n:是否显示多语言切换按钮,默认true
    • enableSetting:是否支持动态修改布局配置,移动端下会自动强制关闭,此功能主要用于开发阶段实时预览各种布局效果,建议在生产环境关闭,默认true
    • logoutConfirm:退出登录时,是否二次确认,默认true

多页 Tabs

  • page:配置如下:
    • opened:默认打开的页签,默认[]

功能配置

  • 2.1.0sameRouteForceUpdate:相同路由,不同参数间进行切换,是否强力更新,默认为false

说明:由于 vue-router 限制,相同路由,不同参数,进行切换时,组件并不是重新加载,而是共享,这会导致切换时,数据状态并没有重置。开启该选项后,在两个相同路由,不同参数间切换时,页面会重载。
说明:使用该功能,该页面在路由配置时,必须设置name字段。

  • 1.3.0dynamicSiderMenu:是否使用动态侧边菜单,默认为false

说明:框架默认是在main.js中获取本地侧边菜单的,开启该选项,则认为是从服务端动态获取侧边菜单,系统将不再主动获取本地菜单,而相关菜单获取逻辑,需开发者自己完成。详见文档基础功能-添加菜单

其中,绝大部分布局配置都支持动态配置并实时更新效果。