前端如何封装一个组件？怎么造轮子？手写js封装一个dialog弹窗组件。

自制JavaScript弹窗组件Dialog的设计与实现

最新推荐文章于 2025-10-16 11:10:17 发布

原创

最新推荐文章于 2025-10-16 11:10:17 发布 · 8k 阅读

31 ·

CC 4.0 BY-SA版权

文章标签：

#js

本文档详细介绍了如何设计和实现一个JavaScript弹窗组件Dialog，包括组件的功能需求、文档结构、CSS样式、HTML模拟调用场景以及JS组件代码。组件具备指定渲染位置、自定义样式、遮罩层、可控显示隐藏、头部和底部操作等功能，适用于网页应用中的各种对话框需求。

文章目录

一、现在要你完成一个Dialog组件，说说你设计的思路？它应该有什么功能？

以前没有尝试过封装组件，其实也没有严格意义的去笼统的学习过封装组件，最近使用layui满频繁的，想要封装一个dialog，尝试一下自己去动手封装一个组件，锻炼一下自己的动手能力，当然在这里也是分享给大家。

回到上方我们其实可以回想一下大体的功能，如果是一个弹窗的话，我们应该怎样去调用？应该怎么去使用呢？是使用js api来调用，还是说放置一个已经写好的html模板，让其设置display:none? js 手动将其显示?

其实上面的问题，我们可以参照一下layui和bootstrap

首先我们可以先看一下bootstrap的弹窗组件
在这里插入图片描述

在这里插入图片描述

我们其实可以明显的看出在bootstrap中其实也就是手动的将html标签语句放置在了body体内，而layui其实就是将对应的弹窗封装成了一个js文件，当调用时，去调用这个js文件的方法，然后采用插入节点的方式，将弹窗呈现。

那么我们应该去采用哪种方式来封装这个弹窗呢？在这里的话我们就将其手动的写入到js文件当中，让其使用js api的方式，让弹窗跳出，从而实现效果。

大体功能

该组件需要提供hook指定渲染位置，默认渲染在body下面。
然后改组件可以指定外层样式，如宽度等
组件外层还需要一层mask来遮住底层内容，点击mask可以执行传进来的onCancel函数关闭Dialog。
另外组件是可控的，需要外层传入visible表示是否可见。
然后Dialog可能需要自定义头head和底部footer，默认有头部和底部，底部有一个确认按钮和取消按钮，确认按钮会执行外部传进来的onOk事件，然后取消按钮会执行外部传进来的onCancel事件。
组件高度可能大于页面高度，组件内部需要滚动条。

我略微的删减掉了几个功能，因为我们采用的是像layui 式js的跳出方式，所以我们不需要对应的变量去控制对应的展示还是隐藏，所以我们的dialog需要实现的就是上方的几个功能。

二、文档结构

在这里插入图片描述
我们大体需要3个文件，一个css、一个html、一个js文件

三、样式Css文件

/*index.css*/
*{
   
   
  margin:0;
  padding:0;
}
/* a标签去除下划线改变颜色 */
a{
   
   
  text-decoration: none;
  color: black;
}
/* 弹窗容器 */
.keyui-dialog-box{
   
   
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 100000;
}
/* 遮罩层样式 */
.keyui-masking-layer{
   
   
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
/* 弹窗默认样式 */
.keyui-dialog{
   
   
  width:50vw;
  height:50vh;
  background-color: white;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/* 头部设置固定高度 */
.keyui-dialog-head{
   
   
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eeeeee;
  position: relative;
}
/* 右上角关闭图标 */
.keyui-rightUp-close{
   
   
  position: absolute;
  right: 20px;
}
/* 弹窗内容区域 */
.keyui-dialog-content{
   
   
  height: calc(100% - 40px);
  padding