Angular EasyUI 消息窗口

2020-06-24 17:34 更新

消息窗口( Messager )提供不同样式的消息窗口,如警示( alert )、确认( confirm )等。 消息窗口( Messager )都是异步的。用户可以在与消息窗口交互后使用回调函数以完成一些动作。

属性列表

名称 数据类型 作用描述 默认值
ok string 确定按钮文本。 Ok
cancel string 取消按钮文本。 Cancel
title string 消息传递对话框标题。 null
msg string 要在对话框中显示的消息。 null
icon string 要在对话框上显示的图标类。 null
modal boolean 消息传递对话框是否是模态对话框。 true
buttons any[ ] 对话框按钮。 [ ]

注:
- 继承: DialogComponent 。
- 选择器: eui-messager 。

使用方法

<eui-messager [showHeader]="false" borderType="无">
    <ng-template euiBodyTemplate let-messager>
        <div class="m-content">
            <h2>{{messager.title}}</h2>
            <p>{{messager.msg}}</p>
            <div class="m-buttons">
                <eui-linkbutton *ngFor="let button of messager.buttons" 
                        [text]="button.text" 
                        (click)="messager.closeDialog(button)">
                </eui-linkbutton>
            </div>
        </div>
    </ng-template>
</eui-messager>

  • 参考图例

消息窗口

消息服务( MessagerService )

  • 方法列表
名称 参数 返回值 作用描述
alert options:any void 显示警告对话框。
confirm options:any void 显示确认对话框。
prompt options:any void 显示提示对话框。

注:
- 继承: None 。

  • 使用方法

this.messagerService.alert({
    title: 'Error',
    icon: 'error',
    msg: 'Here is an error message!'
});
this.messagerService.confirm({
    title: 'Confirm',
    msg: 'Are you confirm this?',
    result: (r) => {
        if (r){
            alert('confirmed: '+r);
        }
    }
});
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号