vue3+element plus实现暗黑模式

最新推荐文章于 2025-04-18 20:26:12 发布

网络部-陈泽宇

最新推荐文章于 2025-04-18 20:26:12 发布

阅读量1.5k

点赞数 8

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_60941411/article/details/135914431

版权

本文介绍了如何在Vue项目中使用ElementPlus库实现暗黑模式切换功能，包括安装、引入、编写暗黑模式开关组件和处理切换事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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-prompt
    active-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 = '';
}