BeerCSS 中 Snackbar 组件的动态参数扩展实践

背景介绍

BeerCSS 是一个轻量级的前端 UI 框架，提供了简洁易用的组件系统。其中 Snackbar 组件常用于向用户显示简短的通知消息。在标准实现中，BeerCSS 的 Snackbar 主要通过 ui() 函数控制显示/隐藏，参数相对简单。

标准用法分析

BeerCSS 的 Snackbar 标准用法分为两步：

1. 创建元素：首先需要在 DOM 中创建 Snackbar 元素结构

<div class="snackbar">
  <i>home</i>
  <span>默认消息</span>
</div>

2. 控制显示：然后通过 ui() 函数控制显示

ui(".snackbar", 6000); // 显示6秒

这种设计理念将元素创建和显示控制分离，保持了核心功能的简洁性。

动态参数需求

在实际项目中，开发者经常需要动态显示不同类型的消息通知，这通常需要以下参数：

• 消息类型（成功/错误/警告等）
• 自定义消息内容
• 显示持续时间
• 显示位置（顶部/底部）
• 附加样式类

实现方案

可以通过封装一个高阶函数来扩展 Snackbar 的功能：

function showSnackbar(type, msg, duration, position, extraClass) {
  // 获取或创建Snackbar元素
  let snackbar = document.querySelector(".snackbar");
  if (!snackbar) {
    snackbar = document.createElement("div");
    snackbar.className = "snackbar";
    snackbar.innerHTML = `<i></i><span></span>`;
    document.body.appendChild(snackbar);
  }

  // 设置内容
  const icon = snackbar.querySelector("i");
  const message = snackbar.querySelector("span");
  icon.textContent = type;
  message.textContent = msg;

  // 重置类
  snackbar.className = "snackbar";
  
  // 设置位置
  if (position === "top") {
    snackbar.classList.add("top");
  }

  // 添加额外类
  if (extraClass) {
    snackbar.classList.add(extraClass);
  }

  // 显示控制
  if (duration === -1) return; // 永久显示
  ui(".snackbar", duration || 6000);
}

使用示例

// 显示成功消息
showSnackbar("check", "保存成功", 3000, "top", "success");

// 显示错误消息
showSnackbar("error", "操作失败", 5000, null, "error");

// 永久显示警告
showSnackbar("warning", "系统维护中", -1, "top", "warning");

设计思考

BeerCSS 保持核心功能简洁的设计哲学值得肯定。通过这种扩展方式，我们既保留了框架的轻量特性，又能满足实际项目中的复杂需求。这种模式也适用于其他组件的功能扩展。

对于需要频繁使用 Snackbar 的项目，建议将扩展函数封装为项目级的工具函数，或者考虑提交 PR 为 BeerCSS 增加可选的高级 API 层。