YbAppPortal Portal登录页
# 基本使用
释放数据能源 ● 呵护生命健康
复制
# 插槽使用
- Logo 插槽
- svgLogo：头部 Logo 和登录页面 Logo
- 头部插槽
- headerLeft：头部左边插槽
- headerRight：头部右边插槽，可替换消息提醒、登录按钮
- aboveHeaderRight：头部消息提醒左边插槽
- 标题插槽
- titleText：中间标题插槽
- titleSubText：中间副标题插槽
- 中间轮播插槽
- centerCard：卡片内容插槽，替换卡片的默认内容
- centerCardIllus：插画插槽，替换插画的默认内容
- centerCardList：替换 yb-swiper 插槽
- 登录表单插槽
- topFormItem：登录表单项前置插槽
- bottomFormItem：登录表单项后置插槽
- footerFormItem：登录按钮底部插槽
YbAppPortal
释放数据能源 ● 呵护生命健康
复制
# 机构使用
释放数据能源●呵护生命健康
复制
# YbAppPortal Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| setCustomTheme | 设置主题参数函数 | function | -- | -- |
| cardList | swiper 卡片数据 | array | -- | [] |
| cardProps | 卡片数据对应字段映射 ，详见CardProps Attributes | object | -- | {} |
| cardLayout | 用于计算一页展示的 slider 数量，详见YbSwiper | object | -- | {itemWidth:245,itemMargin:20,itemBoxShadow:24} |
| sysOrgan | 系统机构参数，详见SysOrgan Attributes | object | -- | {} |
| userInfo | 用户信息 | object | -- | {name:''} |
| isLogin | 是否登录状态 | boolean | -- | false |
| setDocumentTitle | 是否默认更换页面 title 标签内容 | boolean | -- | true |
# YbAppPortal CardProps Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| key | 唯一 key | string | -- | 'key' |
| illus | 卡片插画，对应 yb-illustration 插图库名称 | string | -- | 'illus' |
| title | 卡片标题 | string | -- | 'title' |
| url | 卡片点击跳转链接 | string | -- | 'url' |
| description | 描述，超出长度时鼠标悬浮显示 tooltip | string | -- | 'description' |
| disabled | 是否禁用 | string | ()=>boolean | -- | 'disabled' |
| visitor | 是否游客可见，值为 true 时，未登录状态点击可直接跳转 url | string | ()=>boolean | -- | 'visitor' |
| auth | 是否有权限 | string | ()=>boolean | -- | 'auth' |
# YbAppPortal SysOrgan Attributes
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| primaryColor | 系统默认主题色 | hsl | hsv | hex | rgb | -- | -- |
| organName | 机构名称 | string | -- | -- |
| imgLogo | 系统 logo，base64 或者有效地址 | string | -- | -- |
| logoWidth | logo 宽度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| logoHeight | logo 高度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| systemTitleType | 系统标题的类型 | string | 'img' | 'text' | -- |
| systemTitle | 系统名称，systemTitleType 设置为"text"时显示 | string | -- | -- |
| systemImgTitle | 系统名称图片，base64 或者有效地址 ，systemTitleType 设置为"img"时显示 | string | -- | -- |
| systemImgTitleWidth | 系统名称图片宽度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| systemImgTitleHeight | 系统名称图片高度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| loginSystemImgTitle | 系统登录图片，base64 或者有效地址 ，systemTitleType 设置为"img"且系统名称图片存在时显示 | string | -- | 0 |
| isConcatTitle | systemTitleType 设置为"text"时，机构名称与系统名称是否拼接显示 | string | '0' | '1' | '1' |
| headerHeight | 主页头部高度 | number | -- | 0 |
| bgImage | 主页头部背景图(在背景色之下，需要带透明度的背景色才能看到)，base64 或者有效地址 | string | -- | -- |
| bgImageWidth | 主页头部背景图宽度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| bgImageHeight | 主页头部背景图高度(0 为 auto，负数为百分比，正数为 px) | number | -- | 0 |
| compact | 主页左侧栏紧凑程度 | string | 'medium' | 'small' | 'mini' | 'small' |
| sidebarWidth | 主页左侧栏默认宽度 | number | -- | 0 |
| mainHeaderBgMode | 主页头部背景色模式 | string | -- | -- |
| mainHeaderBgColor | 主页头部背景固定单色 | hsl | hsv | hex | rgb | -- | -- |
| mainHeaderGradientDeg | 主页头部背景渐变角度 | number | -90 ～ 180 | 0 |
| mainHeaderGradientColors | 主页头部背景渐变色 | array | -- | -- |
| mainHeaderGradientColors[].color | 渐变颜色 | hsl | hsv | hex | rgb | -- | -- |
| mainHeaderGradientColors[].gradientPlace | 渐变位置 | number | -- | -- |
# YbAppPortal Events
| 事件名称 | 说明 | 回调参数 |
|---|---|---|
| login | 登录事件 | 共两个参数，form 表单数据、callback（用于关闭按钮 loading 状态） |
| logout | 退出登录事件 | 共一个参数，callback（用于关闭退出确认弹窗和按钮 loading 状态） |
| message | 消息提醒点击事件 | - |
| dropdownMenuClick | 用户下拉菜单项点击事件 | dropdown-item 的指令，内置 'togglePageMode' | 'custemTheme' | 'logout' | 'personalCenter' |
# YbAppPortal Methods
| 方法名称 | 说明 | 回调参数 |
|---|---|---|
| onHideLoginModal | 隐藏登录弹窗 | - |
| onShowLoginModal | 显示登录弹窗 | - |
| toggleTheme | 切换主题颜色 | hsl | hsv | hex | rgb |
# YbAppPortal Slots
| name | 说明 |
|---|---|
| svgLogo | logo 插槽 |
| headerLeft | 头部左边插槽 |
| headerRight | 头部右边插槽，可替换消息提醒、登录按钮 |
| aboveHeaderRight | 头部消息提醒左边插槽 |
| titleText | 中间标题插槽 |
| titleSubText | 中间副标题插槽 |
# YbAppPortal Scoped Slots
| name | 说明 |
|---|---|
| centerCard | 替换卡片内容插槽，参数为 cardLayout，data（卡片数据），index |
| centerCardIllus | 插画插槽，参数为 cardLayout，data（卡片数据），index |
| centerCardList | 替换 yb-swiper 插槽，参数为 cardList |
| topFormItem | 登录表单项前置插槽，参数为 formModel |
| bottomFormItem | 登录表单项后置插槽，参数为 formModel |
| footerFormItem | 登录按钮底部插槽，参数为 formModel |
上次更新: 2024/03/29, 14:52:08