dorado Tip控件：信息提示组件

点击操作弹窗示例

原创于 2021-01-27 08:33:44 发布 · 264 阅读

0 ·

CC 4.0 BY-SA版权

dorado 专栏收录该内容

61 篇文章

订阅专栏

本文介绍了一个基于自定义视图组件实现的点击操作反馈功能，通过弹出提示框询问用户是否确认执行某个操作，并提供了取消和确认两个按钮供用户选择。确认操作会改变当前实体的状态并更新界面显示。

//@Bind #operate.onClick 点击后弹出信息提示框
!function(self,arg){
	var tip = view.get("#tip");
	tip.set({
		icon:"url(>skin>common/icons.gif) -80px -0px",
//		text:"确定该接口吗？",
		
		anchorTarget:self,//在哪个控件旁边
		//arrowDirection:"left",
		//arrowAlign:"center",
		align:"right",
		vAlign:"top",
		
		style:{
			background:"white",
			color:"black",
		},
		//content:"<p>确定该"+self.get("text")+"接口吗？</p><p><button class='label-n' style='margin-right:5px;'>取消</button><button class='label-n choose' style='margin-right:10px;'>确认</button></p>",
		content:[{
			tagName:"p",
			content:"确定"+self.get("text")+"该接口吗？",
		},{
			tagName:"p",
			style:{
				textAlign:"right",
			},
			content:[{
				tagName:"button",
				content:"取消",
				className:"label-n",
				style:{
					marginRight:"5px",
				},
				onclick:function(){
					tip.hide();
				},
				
			},{
				tagName:"button",
				content:"确认",
				className:"label-n choose",
				style:{
					marginRight:"5px",
				},
				onclick:function(){
					var param={};
					var entity=view.get("#datagrid.currentEntity");
					console.log(entity);
					//如果是禁用，则设置修改状态为正常1
					param.status=entity.get("statusString")=="禁用"?1:0;
					param.accountApiConfigId=entity.get("accountApiConfigId");
					action = view.get("#ajaxActionChangeStatus");
					action.set("parameter",param).execute(function(){
						tip.hide();
						view.get("#dataset").flushAsync(function(){
							view.get("#operate").set({
								text:view.get("#dataset.data:#.statusString")=="正常"?"禁用":"恢复",
							});
						});//异步刷新
						
					});	
				},
			}],
		}],
	});
	tip.show();
};