Vue3 Element-Plus 主题切换方案

1. .html 文件中,设置 <html> 标签的 “data-theme” 属性

2. 单独创建主题的样式文件 .css/.scss ,并导入

3. 样式文件中创建不同主题对象

4. 定义不同主题中的样式变量

注意:左右两个主题的变量名一样,值不同

5. 页面样式赋值

6. 通过切换功能触发,可实现不同主题切换

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/77519.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C++之智能指针shared_ptr死锁问题(二百)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

畅玩HarmonyOS 4,趣味心情主题实况框攻略请收藏

看了HarmonyOS 4网友种草和媒体测评&#xff0c;早就跃跃欲试了&#xff0c;近期终于迎来HarmonyOS 4正式版&#xff0c;赶紧拿起我的华为P60升级体验了下&#xff0c;简直不要太丝滑、太好玩&#xff01;其中&#xff0c;最让我眼前一亮的是趣味心情主题与全新的实况窗&#x…

GLTF在线编辑器

GLTF在线编辑器提供了一个内置的模型查看器&#xff0c;可以加载和预览 glTF/glb 文件。用户可以在不用安装任何插件的情况下直接在浏览中快速查看和编辑器3D模型。 它的功能特点如下&#xff1a; 1、打开GLTF模型 用户可以在GLTF编辑器中拖入GLB/GLTF模型或者选择打开本地GL…

stm32---外部中断

一、EXTI STM32F10x外部中断/事件控制器&#xff08;EXTI&#xff09;包含多达20个用于产生事件/中断请求的边沿检测器。EXTI的每根输入线都可单独进行配置&#xff0c;以选择类型&#xff08;中断或事件&#xff09;和相应的触发事件&#xff08;上升沿触发、下降沿触发…

C语言学习系列-->一篇带你看懂内存函数

文章目录 前言memcpy概述模拟实现 memmove概述模拟实现 memsetmemcmp总结 前言 上篇文章学习了C语言字符串函数&#xff0c;只是对字符串进行操作 本节&#xff0c;小编整理了一下C语言中的内存函数&#xff0c;对内存进行操作&#xff0c;只针对会内存块&#xff0c;不针对数据…

消息队列(二):创建核心类及数据库操作

我们核心类主要有四个&#xff1a; 交换机、队列、绑定、消息。这四个核心类还可以继续向下划分。除了这几个还有其他的核心类&#xff0c;先介绍这些&#xff0c;等后面讲到了相关功能实现后面再补充。 核心类 Exchange 关于交换机&#xff0c;我们主要需要实现三种交换机…

【python自动化应用】借助ChatGPT与Python轻松实现办公自动化 —— AIC松鼠活动第九期

背景&#xff1a;当今的工作环境中&#xff0c;高效和快速地完成日常任务对于个人和机构都至关重要。许多人正在利用Python自动化来提高他们的工作效率。Python自动化可以帮助您自动完成繁琐的、重复的、容易出错的任务&#xff0c;从而节省时间和精力。 Python自动化有很多应用…

前端vue按钮控制切换按钮是否禁用和颜色和显示隐藏,利用v-if和v-else

效果 未输入input前图片 输入input后图片 html (1) <input type"number" placeholder"请输入分润数量" placeholder-class"shareprofit_placeholder_num" v-model"money"> <!-- 金钱 --> {{money}} <!-- 可提现余额…

【【萌新编写risc-v之软件的学习使用】】

萌新编写risc-v软件的学习使用 对于vscode我其实没什么好说的 就是先配置好环境 其实vscde作为一个编译器的软件 其实并不需要指望能往里面加载多少功能 我们需要做的就是赋予编辑器更好用的功能和体验 有些人会在vscode里面甚至加入波形 仿真 我觉得不如交给 vivado来用 在vs…

PyTorch实战-实现神经网络图像分类基础Tensor最全操作详解(一)

目录 前言 一、PyTorch数据结构-Tensor 1.什么是Tensor 2.数据Tensor使用场景 3.张量形态 标量&#xff08;0D 张量&#xff09; 向量&#xff08;1D 张量&#xff09; 矩阵(2D张量) 3D 张量与高维张量 二、Tensor的创建 1. 从列表或NumPy数组创建 2. 使用特定的初始…

分拣平台API安全治理实战 | 京东物流技术团队

导读 本文主要基于京东物流的分拣业务平台在生产环境遇到的一些安全类问题&#xff0c;进行定位并采取合适的解决方案进行安全治理&#xff0c;引出对行业内不同业务领域、不同类型系统的安全治理方案的探究&#xff0c;最后笔者也基于自己在金融领域的经验进行了关于API网关治…

学习记忆——英语篇

文章目录 英语字母形象起源右脑记忆单词的原则四大步骤第一步&#xff1a;摄取信息第二步&#xff1a;处理信息第三步&#xff1a;储存信息第四步&#xff1a;提取信息 训练例子字母形象训练 右脑记忆单词5大方法字源法编码法字母编码法字母组合编码法 拼音法全拼法拼音组合 熟…

Navicat连接openGauss数据库报错

错误信息&#xff1a;fe_sendauth:invalid authentication request from server:AUTH_REQ_SASL_CONT without AUTH_REQ_SASL 解决步骤&#xff1a; 1&#xff09;关闭防火墙&#xff1a; 切换root用户执行&#xff1a;su - root 输入密码 systemctl status firewalld 查…

神经网络 01(介绍)

一、神经网络 人工神经网络 (Artificial Neural Network&#xff0c;简写为ANN)也简称为神经网络 (NN)&#xff0c;是一种模仿生物神经网络结构和功能的 计算模型。人脑可以看做是一个生物神经网络&#xff0c;由众多的神经元连接而成。各个神经元传递复杂的电信号&#xff0c…

Vue3事件处理

文章目录 Vue3事件处理1. 概念2. 实例2.1 点击按钮次数12.2 v-on 可以接收一个定义的方法来调用2.3 内联 JavaScript 语句2.4 事件处理程序中调用多个方法 3. 事件修饰符4. 按键修饰符 Vue3事件处理 1. 概念 使用 v-on 指令来监听 DOM 事件&#xff0c;从而执行 JavaScript 代…

计算机网络初识

目录 1、计算机网络背景 网络发展 认识 "协议" 2、网络协议初识 OSI七层模型 TCP/IP五层(或四层)模型 3、网络传输基本流程 网络传输流程图 数据包封装和分用 4、网络中的地址管理 认识IP地址 认识MAC地址 1、计算机网络背景 网络发展 在之前呢&…

【C语言】库宏offsetof

一.offsetof简介 因此,宏offsetof的作用是: 当你传入结构体的类型及其成员时,它会返回该成员在结构体中的偏移量. 二.offsetof的使用 如下,我们使用offsetof打印一下结构体foo中,成员a,成员b及成员c相对于首地址的偏移量分别是多少: #include <stdio.h> #include …

模板学堂|数据可视化仪表板大屏设计流程梳理

DataEase开源数据可视化分析平台于2022年6月正式发布模板市场&#xff08;https&#xff1a;//dataease.io/templates/&#xff09;。模板市场旨在为DataEase用户提供专业、美观、拿来即用的仪表板模板&#xff0c;方便用户根据自身的业务需求和使用场景选择对应的仪表板模板&a…

更多场景、更多选择,Milvus 新消息队列 NATS 了解一下

在 Milvus 的云原生架构中&#xff0c;消息队列&#xff08;Log Broker&#xff09;可谓任重道远&#xff0c;它不仅要具备流式数据持久性、支持 TT 同步、事件通知等能力&#xff0c;还要确保工作节点从系统崩溃中恢复时增量数据的完整性。 在 Milvus 的架构中&#xff0c;一切…

中国各省市相关图标

中国各省市相关图标