微客导航 » 文章资讯 » Angular2.0实现modal对话框的方法示例

Angular2.0实现modal对话框的方法示例

2023-09-16 08:21:05 247

本文实例讲述了Angular2.0实现modal对话框的方法。分享给大家供大家参考，具体如下：

觉得写的比较巧妙的就是样式的选取~记录下

CSS部分

.font{
font-family:"MicrosoftYaHei",Arial;
font-size:12px;
color:#333333;
}
.ky-modal-content{
min-width:520px;
min-height:240px;
}
.ky-modal-header{
/*height:40px;*/
padding:010px010px;
}
.ky-modal-title{
font-size:16px;
font-weight:100;
}
.ky-modal-body{
min-height:110px;
text-align:center;
}
.ky-modal-footer{
height:30px;
border-top:0;
text-align:-webkit-center;
}
.ky-modal-message{
padding-left:3px;
vertical-align:middle;
}
.ky-modal-icon{
font-size:16px;
vertical-align:middle;
}
.ky-modal-question-icon{
color:#ff8000;
}
.ky-modal-check-icon{
color:green;
}
.ky-modal-exclamation-icon{
color:red;
}
.ky-modal-close{
outline:none;
font-size:30px;
margin-top:8px;
font-weight:100;
vertical-align:-webkit-baseline-middle;
}
.vertical-align-center{
display:flex;
display:-webkit-box;
display:-moz-box;
-webkit-box-align:center;
-moz-box-align:center;
text-align:-webkit-center;
}

HTML部分






×

{{title}}

JS部分

import{Component,Input,Output,EventEmitter,OnInit}from'@angular/core';
@Component({
moduleId:module.id,
selector:'ky-modal',
styleUrls:['./ky-modal.css'],
templateUrl:'./ky-modal.component.html',
})
exportclassKyModalComponentimplementsOnInit{
@Input()title:string='';
@Input()type:string='';
@Input()message:string='';
@Input()confirmText:string='';
@Input()cancelText:string='';
@Input()id:string;
@Input()conformButtonType:string;
iconType='question';
iconClass:any={'fa-question-circle':false,
'fa-check-circle':false,
'fa-exclamation-circle':false};
typeList=['question','check','exclamation'];
@Output()actionButtonDown=newEventEmitter();
@Output()undoButtonDown=newEventEmitter();
cancelButtonDown(){
this.undoButtonDown.emit('event');
}
confirmButtonDown(){
this.actionButtonDown.emit('event');
}
determine(){
letthat=this;
if(that.type&&_.contains(that.typeList,that.type)){
that.iconType=that.type;
}
that.iconClass[`fa-${that.iconType}-circle`]=true;
that.iconClass[`ky-modal-${that.iconType}-icon`]=true;
}
ngOnInit(){
this.determine();
}
}

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJSMVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。

返回顶部
3162201930
czq8825@qq.com

Angular2.0实现modal对话框的方法示例

热门推荐

随机推荐