VUE3实现Element-Plus深色主题切换

useDark意思是否使用深色模式,useDark它是通过读取localStorage/sessionStorage的存储值(key 是可自定义的),从而设置html的class。从element-plus官网可以看到,它自带有暗黑主题,我们只需要在 html 上添加一个名为 dark 的类,所以选择使用useDark方便了许多。

VUE3实现Element-Plus深色主题切换_第1张图片

除了引入elementPlus外,还要在main.js中引入:

VUE3实现Element-Plus深色主题切换_第2张图片

接下来就是在页面写具体的实现:

VUE3实现Element-Plus深色主题切换_第3张图片

效果:

VUE3实现Element-Plus深色主题切换_第4张图片
VUE3实现Element-Plus深色主题切换_第5张图片

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