Element-Plus 中的 “ 属性是如何工作的？

element-plus 中的 i i=”dark:ep-moon ep-sunny” 属性详解

在 element-plus 中，我们可能会遇到这样的代码：

<el-button><i i="dark:ep-moon ep-sunny"></i> </el-button>

其中， 这段代码引起了我们的疑惑。它是如何工作的？

i 属性

中的 i 属性是一个自定义属性，它允许我们动态地设置元素的类名。当使用 dark:ep-moon 这样的值时，它表示在元素中添加一个 class=”dark” 属性时，该元素应获得 ep-moon 类。同样，当使用 ep-sunny 时，这意味着当元素中没有 class=”dark” 时，该元素应获得 ep-sunny 类。

暗黑模式

在 element-plus 中，暗黑模式通过向 html 元素添加 class=”dark” 属性来触发。因此，当我们点击按钮以切换到暗黑模式时，dark 类将被添加到 html 元素中。

css 优先级

element-plus 使用 css 优先级来确定哪个类名的样式应应用于元素。在 css 中，.dark [i~=”ep-sunny”] 的优先级高于 [i~=”ep-sunny”]，这意味着当 html 元素具有 dark 类时，.dark [i~=”ep-sunny”] 的样式将覆盖 [i~=”ep-sunny”] 的样式。

视觉效果

这使得在切换到暗黑模式时，原本属于 ep-sunny 类的元素（按钮中的图标），会被覆盖并显示 ep-moon 样式。这种方式可以让图标在暗黑模式下保持可见性，而不用写大量的条件样式。