巧借遮罩层，微信 WeUI 演示状态切换新妙招

2024-01-11 19:57:37

WeUI 是腾讯官方出品的一款小程序开发框架，它以极简、清新、统一为原则，为开发人员提供了丰富的 UI 组件库。在 WeUI 中，状态切换是一个非常重要的功能，它允许用户在不同的状态之间切换，如白天模式和暗夜模式。

传统的做法是通过枚举来定义各颜色对应 active 状态的色号，例如：

const colors = {
  red: {
    active: '#FF0000',
  },
  blue: {
    active: '#0000FF',
  },
};

然后，在需要使用 active 状态时，只需通过 CSS 样式表将相应的颜色值赋予元素即可：

.button-active {
  background-color: #FF0000;
}

这种方法虽然简单易用，但也有一个缺点，那就是需要为每个颜色都定义一个 active 状态的色号，这可能会导致代码量变得非常大。

相比之下，WeUI 则采用了另一种巧妙的方式来实现状态切换。它通过叠加遮罩层的方法来实现 active 状态的样式变化。具体来说，WeUI 会在需要切换状态的元素上添加一个遮罩层，这个遮罩层是透明的，但它会覆盖在元素的上面。当元素处于 active 状态时，遮罩层就会变成相应的颜色，从而实现 active 状态的样式变化。

这种方式的优点在于，它不需要为每个颜色都定义一个 active 状态的色号，只需要定义一个遮罩层即可。这可以大大减少代码量，使代码更加简洁。

以下是一个使用 WeUI 实现状态切换的示例：

<div class="button">
  <div class="mask"></div>
  <span>按钮</span>
</div>

.button {
  position: relative;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  transition: background-color 0.3s ease-in-out;
}

.button-active .mask {
  background-color: #FF0000;
}