# 控制器增加页面统一提示组件
# 背景
目前控制器的无序列号的提示五花八门,样式未进行统一处理,代码实现方式也是各写各的。所以这里做统一处理,方便维护。
# 实现
通过观察,发现几乎所有页面都是继承自SFX.page.AbstractPage
,所以在这个父类中增加序列号的判断逻辑。
layout : function(){
/* *** */
this.setPageTip();
},
通过以前实现的序列号判断方法SF.isModuleHasOprAuth
,获取是否有页面权限,无权限时往当前页面添加弹窗组件SFX.tips.PageTip
。
/**
* 设置页面的提示,支持顶部横幅和整个页面遮罩两种效果,默认取sn信息去显示
*/
setPageTip: function () {
var me = this;
// 判断是否有sn权限
var noSn = !SF.isModuleHasOprAuth(this.initialConfig.moduleName);
// 页面自定义
var pageTipConfig = SF.merge(
(this.getPageTipConfig && this.getPageTipConfig()) || {},
SFX.tips.PageTip.prototype.getDefaultOptions()
);
// 没权限,统一加提示语组件
// isTabRootPage 只在tab的根AbstractPage加,存在页面里套了AbstractPage的页面,不做限制会显示多个出来
if ((noSn && me.initialConfig.isTabRootPage) ||
pageTipConfig.forceShow
) {
this.container.add(
new SFX.tips.PageTip({
pageTipConfig: pageTipConfig,
getTipHeightCb: function (height) {
// 待提示框渲染完后获得其高度,动态修改页面的高度,给提示框空出位置来
var containerHeight = me.container.getHeight() - height;
me.container.setHeight(containerHeight);
me.container.el.dom.style.paddingTop = height + 'px';
// formPanel的页面在onLayout中用了个定时器,这里也只能用定时器了
if (me.formPanel && me.scrollBtnToPos) {
setTimeout(function () {
me.scrollBtnToPos(containerHeight);
}, 0)
}
}
})
);
}
},
# 使用
弹窗有两种样式:
- 顶部提示(有警告和错误两种状态样式)
- 整体遮罩(用于通用情况)
# 默认
如果页面没配置自定义效果,则会使用默认样式
# 自定义效果
SFX.tips.PageTip
提供自定义效果
默认配置如下
getDefaultOptions: function () {
return {
forceShow: false, // 强制显示(默认关闭)
type: 'mask', // top显示在顶部,mask显示遮罩(默认)
textAlign: 'center', // 文字对齐方向 center(默认) left right
status: 'warn', // 状态样式,type=top时才生效 warn(默认) error
html: '', // 提示语
actionHandler: null // 点击回调函数
};
},
配置方式看注释就行
说明一下:
forceShow
表示强制显示,适合不是序列号控制的场景。
页面如果需要自定义,在页面内配置一份getPageTipConfig
即可,格式
getPageTipConfig: function () {
return {支持的参数可查看上面的默认配置}
}