微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

CSS部分

rush:css;"> .font { font-family: "Microsoft YaHei",Arial; font-size: 12px; color: #333333; } .ky-modal-content { min-width: 520px; min-height: 240px; } .ky-modal-header { /*height : 40px;*/ padding: 0 10px 0 10px; } .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部分

rush:xhtml;">

JS部分

rush: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',}) export class KyModalComponent implements OnInit { @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 = new EventEmitter(); @Output() undobuttonDown = new EventEmitter(); cancelButtonDown() { this.undobuttonDown.emit('event'); } confirmButtonDown() { this.actionButtonDown.emit('event'); } determine() { let that = 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程序设计有所帮助。

原文地址:https://www.jb51.cc/js/33673.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐