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

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《Element-Plus 暗黑模式下图标切换的秘密：i 标签中的 i 属性到底是什么？ 》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

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 属性到底是什么？ 》的介绍应该让你收获多多了吧！欢迎大家收藏或分享给更多需要学习的朋友吧~golang学习网公众号也会发布文章相关知识，快来关注吧！