从零实现消息提示框，赋能开发者能力进阶

2023-12-22 01:36:40

消息提示框在各种应用场景中备受欢迎，而其中最常用的便是 Element UI 的消息提示框。虽然直接使用 Element UI 的消息提示框非常方便，但何不尝试从零开始构建属于我们自己的消息提示框呢？这样不仅可以提升我们的个人能力，还能增强我们的竞争力。

为了迈出第一步，首先让我们梳理清楚消息提示框的基本原理：

HTML 结构： 消息提示框是一个包含标题、内容和按钮的容器。它通常使用 <div> 元素和 CSS 样式来创建。
CSS 样式： 消息提示框的样式通常包括背景颜色、边框、圆角、字体和按钮样式。这些样式使用 CSS 定义，以便可以轻松自定义。
JavaScript 逻辑： 消息提示框的功能由 JavaScript 脚本控制。JavaScript 脚本可以实现各种功能，例如显示和隐藏消息提示框、设置标题和内容、添加按钮并处理按钮点击事件。

准备好以上知识之后，我们就可以着手构建自己的消息提示框了。

1. 搭建 HTML 结构

<div class="message-box">
  <div class="message-box-header">
    <span class="message-box-title"></span>
  </div>
  <div class="message-box-content"></div>
  <div class="message-box-footer">
    <button class="message-box-button message-box-button--ok"></button>
    <button class="message-box-button message-box-button--cancel"></button>
  </div>
</div>

2. 定义 CSS 样式

.message-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.message-box-header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.message-box-content {
  font-size: 16px;
  margin-bottom: 20px;
}

.message-box-footer {
  text-align: right;
}

.message-box-button {
  margin-right: 5px;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
  background-color: #fff;
  cursor: pointer;
}

.message-box-button--ok {
  color: #4caf50;
}

.message-box-button--cancel {
  color: #f44336;
}

3. 实现 JavaScript 逻辑

// 获取 DOM 元素
const messageBox = document.querySelector('.message-box');
const messageBoxTitle = messageBox.querySelector('.message-box-title');
const messageBoxContent = messageBox.querySelector('.message-box-content');
const messageBoxButtonOk = messageBox.querySelector('.message-box-button--ok');
const messageBoxButtonCancel = messageBox.querySelector('.message-box-button--cancel');

// 显示消息提示框
const showMessageBox = (title, content, okCallback, cancelCallback) => {
  messageBoxTitle.textContent = title;
  messageBoxContent.textContent = content;

  // 显示消息提示框
  messageBox.style.display = 'block';

  // 添加按钮事件监听器
  messageBoxButtonOk.addEventListener('click', () => {
    // 调用确认回调函数
    okCallback();

    // 关闭消息提示框
    messageBox.style.display = 'none';
  });

  messageBoxButtonCancel.addEventListener('click', () => {
    // 调用取消回调函数
    cancelCallback();

    // 关闭消息提示框
    messageBox.style.display = 'none';
  });
};

// 使用消息提示框
showMessageBox('提示', '您确定要删除这条数据吗？', () => {
  // 确认回调函数
  console.log('已确认');
}, () => {
  // 取消回调函数
  console.log('已取消');
});