vue3+element plus实现暗黑模式

本文主要是介绍vue3+element plus实现暗黑模式，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、首先需要安装并引入elemengt plus

//安装
# 选择一个你喜欢的包管理器# NPM
$ npm install element-plus --save# Yarn
$ yarn add element-plus# pnpm
$ pnpm install element-plus

//在main.js中引入// 引入 element-plus 插件与样式
import ElementPlus from 'element-plus'
//引入暗黑模式的样式
import 'element-plus/theme-chalk/dark/css-vars.css'

2、写暗黑模式的样式

<el-switch@change='changeDark'      //切换开关时触发该事件v-model='dark'            //用于动态切换el-switch开关inline-promptactive-icon="MoonNight"inactive-icon="Sunny"
>
</el-switch>

3、进行暗黑模式的切换

1、收集开关的数据,默认为关闭
let dark=ref<boolean>(false)2、switch开关的chang事件进行暗黑模式的切换
const changeDark=()=>{//获取html根节点，当根节点上有class=‘dark’时，变为暗黑模式let html=document.documentElement//判断HTML标签是否有类名dark//当按钮为关闭时，设置根节点的className为'',当暗黑模式按钮开启时，根节点的className设置为'dark'dark.value?html.className = 'dark' : html.className = '';
}

这篇关于vue3+element plus实现暗黑模式的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---