Angular 实现一个 Dialog 组件

  1. 效果如下

https://stackblitz.com/edit/base-dialog

点击按钮,出现弹窗,背后还有遮盖层,弹窗的内容可以自定义

  1. 打开一个全新的 Angular 项目,然后执行创建组件命令 ng g c --name base-dialog 得到三个初始化的文件

image.png

  1. 首先制作遮盖层,就是铺满整个屏幕的div base-dialog.component.html
<div class="modal-overlay" *ngIf="visible"></div>

对应的样式 base-dialog.component.scss

.overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1200;
  background-color: rgba(0, 0, 0, 0.3);
  touch-action: none;  /* 不触发任何事件 */
  -ms-touch-action: none;
}

效果:遮盖整个屏幕

image.png

默认情况下,遮盖层是不显示的

  @Input() dialogTitle = '';
  /*
  * 显示/隐藏
  * */
  _visible = false;
  constructor() { }

  ngOnInit() {
  }

  show() {
    this._visible = true;
  }

  close() {
    this._visible = false;
  }
  1. 制作弹窗Dialog区域
<div class="overlay"></div>
<div class="dialog-container">
  <div class="dialog-content">
    <div class="dialog-header">{{dialogTitle}}</div>
    <div class="dialog-body">
      <ng-content select=".dialog-body"></ng-content>
    </div>
    <div class="dialog-footer">
      <ng-content select=".dialog-footer"></ng-content>
    </div>
  </div>
</div>

补充样式

.overlay {
  ....
}
.dialog-container {
  position: fixed;
  z-index: 1300;
  left: 50%;
  top: 50%;
  background-color: #fff;
  .dialog-content {
    border-radius: 8px;
    padding: 10px;
  }
  .dialog-body {
  }
  .dialog-footer {
    text-align: right;
  }
}

这里有一个细节是base-dialogz-index一定要大于overlay的,已保证dialog能显示在遮盖层上方。

  1. 打开app.component.html, 加入下面的代码
<button (click)="dialogRef.show()">Show</button>

<app-my-dialog class="dialog-container"  dialogTitle="这是标题" #dialogRef>
  <ng-container class="dialog-body">
    <div>
      <p>这是内容</p>
    </div>
  </ng-container>
  <ng-container class="dialog-footer">
    <button (click)="dialogRef.close()">关闭</button>
  </ng-container>
</app-my-dialog>
  • dialogRef 是这个组件的引用别名
  • <ng-container class="dialog-body"> 类似Vue中的插槽,之内的html会替换组件内部的<ng-content select=".dialog-body"></ng-content> 效果如下,点击show按钮,显示弹窗,点击弹窗中的关闭按钮,恢复原样。

image.png

  1. 其实大部分功能已经完成了,剩下的是样式美化和添加一些额外功能,比如现在是居中显示,示例中加入了从底部显示,用到了CSS3中的动画。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

Solution for Lead OPA test error ( add button clicked after cancel button )

问题的表现是我们的test code里点了cancel button之后,再点Add button,这行语句报错:在dialog里找不到这个期望的product...

10730
来自专栏Jerry的SAP技术分享

My Lead OPA test failure caused by Dialog close animation

One colleague encountered My Lead OPA test faiulre on test case “Add Product tes...

9430
来自专栏acoolgiser_zhuanlan

MFC编程入门之六(对话框:创建对话框模板和修改对话框属性)

本节开始为大家讲解偏向应用的知识——创建对话框。    对话框,大家应该很熟悉了,在我们常用的软件中大多都有对话框界面,例如,360安全卫士的主界面其实就是对...

21610
来自专栏Jerry的SAP技术分享

myAppointment OPA test case issue

Test case description: 在create appointment view中,定义了一个这样的元素:

7440
来自专栏sktj

bootstrap 模态框 弹出框

('#identifier').modal('show') 显示 $('#identifier').modal('hide') 隐藏

23440
来自专栏Android必知必会

Android 必知必会 - DialogFragment 使用总结

Android 官方推荐使用 DialogFragment 来代替 Dialog ,可以让它具有更高的可复用性(降低耦合)和更好的便利性(很好的处理屏幕翻转的情...

25420
来自专栏达达前端

Android开发工程师文集-相关控件的讲解,五大布局

大家好,我是 Vic,今天给大家带来Android开发工程师文集-相关控件的讲解,五大布局的概述,希望你们喜欢

10340
来自专栏Android必知必会

Android 必知必会 - DialogFragment 实现类似 PopupWindow 效果

版权声明:本文为[他叫自己Mr.张]的原创文章,转载请...

20320
来自专栏达达前端

前端技术前沿4

Github:https://github.com/Meituan-Dianping/mpvue

12630

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励