专栏首页finleyMaAngular 实现一个 Dialog 组件

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 条评论
登录 后参与评论

相关文章

  • 4. Rxjs 介绍及注意事项

    先梳理一些概念: Rx:ReactiveX是Reactive Extensions的缩写,一般简写为Rx,最初是LINQ的一个扩展,由微软的架构师Erik M...

    mafeifan
  • react学习系列2 使用react-router v4

    mafeifan
  • 什么是消息队列?

    消息队列不知道大家看到这个词的时候,会不会觉得它是一个比较高端的技术,反正我是觉得它好像是挺牛逼的。

    mafeifan
  • 使用Vue 3构建更好的高阶组件

    高阶组件(HOC)是使用模板声明性地向您的应用程序添加某些功能的组件。我相信即使引入了Composition API,它们仍将保持非常重要的关联。

    公众号---人生代码
  • 【小算法】插入排序

    插入排序也是一种非常容易理解的算法,核心思想就是每次将新的元素往原本有序的数组中插入。

    Frank909
  • es6入门

    es6作为最新的js语言版本,有很多特性是不得不晓的。下面将语法中常用的分析出来,对应到基本对象类型的会在对象里描述。

    RobinsonZhang
  • 教你使用HTML5原生对话框元素,轻松创建模态框组件

    以前,如果我们想要构建任何形式的模式对话框或对话框,我们需要有一个背景,一个关闭按钮,将事件绑定在对话框中的方式安排我们的标记,找到一种将消息传递出去的方式对话...

    用户6167509
  • PHP短视频源码,全局异常处理

    yunbaokeji柯基
  • RxJS Subject

    观察者模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

    阿宝哥
  • es6入门

    es6作为最新的js语言版本,有很多特性是不得不晓的。下面将语法中常用的分析出来,对应到基本对象类型的会在对象里描述。

    RobinsonZhang

扫码关注云+社区

领取腾讯云代金券