elementPlus实现暗黑与白亮主题切换

elementPlus上面默认是支持黑白主题切换的。只需要给html标签添加dark类名并且在mian.ts中导入css变量即可
elementPlus实现暗黑与白亮主题切换_第1张图片

我们就按照它推荐的useDark这个hook来

useDark使用起来非常简单,只需引入使用即可。vue直接就可以使用,无需做什么其他操作

中文网地址:http://www.vueusejs.com/core/useDark/

elementPlus实现暗黑与白亮主题切换_第2张图片

下面是代码

第一步:main.ts中一定要导入css变量

import 'element-plus/theme-chalk/dark/css-vars.css'

第二步:在需要切换的地方调用useDark


 

注意点:点击的事件一定要带(),不然只会触发一次

默认是这样的

elementPlus实现暗黑与白亮主题切换_第3张图片

elementPlus实现暗黑与白亮主题切换_第4张图片

点击之后就会改变

elementPlus实现暗黑与白亮主题切换_第5张图片

elementPlus实现暗黑与白亮主题切换_第6张图片

你可能感兴趣的:(vue.js,前端,javascript)