Element-Plus 暗黑模式下图标切换的秘密：i 标签中的 i 属性到底是什么？

element-plus 切换暗黑模式 图标的秘密

在 Element-Plus 的项目中，您可能遇到过如下代码：

<el-button @click="toggleDark()">
  <i i="dark:ep-moon ep-sunny" />
</el-button>

这段代码令人疑惑的地方在于 i 标签中的 i 属性，它看起来像是一个自定义属性。那么它到底是什么含义？

其实，这只是一个自定义属性，其中 dark:ep-moon 和 ep-sunny 分别是两个不同的属性值。当切换到暗黑模式时，HTML 中会添加 class="dark" 属性。

由于 CSS 中 .dark [i~="ep-sunny"] 样式声明的优先级高于 [i~="ep-sunny"]，因此在暗黑模式下，ep-sunny 图标会被覆盖，显示 ep-moon 图标。

这种写法将属性语义化，使代码更容易理解，也能更直观地看出暗黑模式下的图标变化。

以上就是Element-Plus 暗黑模式下图标切换的秘密：i 标签中的 i 属性到底是什么？的详细内容，更多请关注其它相关文章！