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