<i i="dark:ep-moon ep-sunny" /> 什么意思？

作者站长头像
站长
· 阅读数 5

看element-plus-vite-starter项目里面有一个功能是切换暗黑模式，有句代码不太懂，i标签里面i="dark:ep-moon ep-sunny" 大概能猜到什么意思，但是不知道为什么可以这么写，有大佬解惑吗？

 <el-button @click="toggleDark()"> // 点击按钮改变按钮里的图标
    <i i="dark:ep-moon ep-sunny" />
  </el-button>
回复
1个回答
avatar
test
2024-07-10

你想的太过复杂了，这就是一个自定义的属性，并且dark:ep-moon是一个属性，ep-sunny是一个属性，暗黑模式的时候它在html上加了个class="dark"属性，然后因为在css中.dark [i~="ep-sunny"]的样式声明优先级比较高所以覆盖了[i~="ep-sunny"]，它这么写估计就是为了让属性更加语义化让代码更容易理解吧answer image

回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容