博客都在使用的主题切换使用vue2实现思路

最新推荐文章于 2024-08-16 23:09:58 发布
最新推荐文章于 2024-08-16 23:09:58 发布
阅读量446 收藏 10
点赞数 4
分类专栏： 前端 JavaScript Vue 文章标签： css 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Zwwxd666/article/details/140453069
版权
前端 同时被 3 个专栏收录
27 篇文章 0 订阅
订阅专栏
JavaScript
17 篇文章 0 订阅
订阅专栏
Vue
17 篇文章 0 订阅
订阅专栏

效果展示

theme1

步骤

1-变量定义css主题色

image-20240716010512150

2-html初始化主题样式

image-20240716010706242

3-vuex存储主题变量，点击触发修改根元素html的样式

image-20240716010745592

4-method触发方法

image-20240716010915063

mutation使用commit

action使用dispatch

5-App组件引入该css文件，使用即可

image-20240716011015507

image-20240716011027177

6-将其加入本地存储，刷新后保持主题不变

vuex存储theme的初始值从本地读取

且每次切换时设置更新本地存储的theme值

image-20240716012300765

index界面刷新后读取的代码

image-20240716012207679

Zww0891
关注
  • 4
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue切换主题
CecePony的博客
05-14 3560
本文介绍两种elementUI切换主题色的方法 项目示例：https://github.com/yangzm0618/tags 1：官方提供的方法，直接修改scss文件达到修改目的，开发人员使用(比官网容易理解，有图有真相)。 2：通过选颜色值在项目中达到换肤目的，用户使用。此方法根据官方主题切换修改而来 先搭建项目： 　　npm install -g vue//全局安装vue ...
vue 项目如何实现切换主题
weixin_59519449的博客
04-06 4266
需求：用户通过取色器选择自己喜欢的颜色，替换项目中的主题色 实现效果： 实现思路： 在项目中使用的是less，使用@themeColor定义了主题色，便想着尝试用js修改less的变量即可，但查询了一下只知道有less.modifyVars方法可以修改，但没有详细的说明，顺便查到了可以修改js可以修改原生css的变量，而且简单易懂，便尝试使用css来定义主题色并设置修改。 首先在App.vue中设置主题色： <style lang="less"> #app { --...
白天黑夜切换开关 - vue2实现
09-26
白天黑夜切换开关 - vue2实现
Vue2:切换主题功能
qq_45061461的博客
10-06 873
2.配置解析less变量设置:在vue.config.json文件中找到 mudule.exprots。调用方法更改less变量的值,然后把less变量给对应需要改变颜色的css中就行啦。3.点击不同的主题颜色,调用方法改变原来的less变量值,直接吧主题模块代码。1.创建全局的 less 变量文件:variables.less。2.定义主题默认对应的颜色 :model.js。4.主题组件调用的方法。
Vue + ElementUI 后台管理系统实现主题风格切换
无解的菜鸟晖 的博客
01-07 5527
​一、目的 此次写作内容是在我之前发布一篇文章的基础上进行新增的。 上一篇文章：Vue + ElementUI 后台管理系统实现顶部一级菜单栏，左侧二级菜单栏_无解的菜鸟晖的博客-CSDN博客 这次要实现在页面上新增一个切换主题风格的按钮，点击后实现页面主题风格的切换功能。 二、效果图 三、具体实现步骤 1、前期准备：使用 bus 进行组件通信 在要相互通信的组件之间，引入一个新的 Vue 实例，然后分别通过调用这个实例的事件触发和监听，来实现通信和参数传递。 在utils 文件夹下放入
详解使用vue实现tab 切换操作
08-30
在前端开发中，Tab 切换是一个常见的交互操作，使用 Vue 实现 Tab 切换操作可以使得界面更加灵活和交互性强。下面将介绍使用 Vue 实现 Tab 切换操作的三种思路，並对每种思路进行详细说明。 思路一：切换 Content ...
VUE项目实现主题切换的多种方法
01-21
需求是 做一个深色主题和浅色主题切换的效果 方法一 多套css 这个方法也是最简单，也是最无聊的。 <!-- 中心 --> 动态获取父级class名称，进行一个父级class的多次定义 ()> {{ className == box ? 开灯...
使用vue-router切换页面时实现设置过渡动画
10-16
在Vue.js应用中，使用vue-router进行页面切换时，我们经常希望添加过渡动画来提升用户体验。这篇文章将详细讲解如何在vue-router中实现页面切换的过渡动画。 首先，我们需要理解vue-router的基本概念。Vue Router是...
Vue 中使用vue2-highcharts实现曲线数据展示的方法
08-27
在本文中，我们将介绍如何使用Vue框架和vue2-highcharts库来实现曲线数据展示的方法。通过本文，读者可以学习如何使用vue2-highcharts来创建一个简单的曲线图表，并了解其实现原理和关键代码。 知识点1: 使用vue2-...
CSS变量的语法、特性和细节
读心悦
08-16 279
CSS变量（也称为CSS自定义属性）是一种在CSS中存储值，然后在整个文档中复用的方法。它们提供了一种强大的方式来组织和重用样式值，使得维护和更新样式变得更加容易。下面将详细介绍CSS变量的语法、特性和一些细节。
响应式Web设计：纯HTML和CSS的实现技巧
Caleb的博客
08-16 543
响应式设计的核心理念是使用灵活的布局和媒体查询来自动调整网页的布局和样式。传统的静态网页设计往往只能适应固定的屏幕尺寸，而响应式设计则能够根据用户设备的不同，自适应地调整内容展示。它允许我们为不同的屏幕尺寸和特性定义不同的CSS样式，从而实现页面的自适应布局。）在响应式设计中非常重要，因为它们可以根据不同的设备和用户设置调整元素的大小。这样，无论图片的实际尺寸如何，它都会根据其容器的宽度自动缩放，从而避免了图片溢出容器的情况。函数，使得网格项在屏幕尺寸变化时自动调整列数和列宽，从而适应不同的显示设备。
css-浮动
m0_73882020的博客
08-16 246
不再保留原先的位置。
CSS 的 position 属性
于坤
08-16 88
CSS 的position属性用于指定一个元素在文档中的定位方式。static（默认值）toprightbottomleftrelativetoprightbottomleftabsolutestaticfixedstickytoprightbottomleft。
CSS——弹性盒（flex）
Fan_web的博客
08-16 449
本文主要跟大家分享了弹性盒的内容，同时扩充了CSS中的部分知识：像素、视口、移动端、完美视口、vw单位以及适配、响应式布局中的媒体查询等等。下一节将开始分享关于JavaScript的初级学习内容。
CSS（层叠样式表）
Chujun123528的博客
08-09 1295
CSS全称为Cascading Style Sheets（层叠样式表），是一种用于描述网页样式的语言。它可以将HTML文档中的内容与样式分离，使得网页的结构和呈现分离，提高了页面的可维护性和可重用性。CSS允许开发者对HTML元素进行各种视觉方面的样式控制，包括文字和字体属性、颜色和背景、布局和定位等。
在vue3中配置scss
iku_n的博客
08-12 347
要在 Vue 3 中使用 SCSS（Sass 的一个子集），你需要安装相应的依赖，并对项目进行一些配置。
CSS自定义属性的设置与获取
最新发布
读心悦
08-16 144
在CSS中，自定义属性是通过在选择器内部使用--前缀来声明的。这些属性通常定义在:root伪类中，以便在整个文档范围内使用，但也可以定义在任何其他选择器中以限制其作用域。:root {/* 只在这个容器内有效 */在JavaScript中，你可以使用方法来设置自定义属性的值。这个方法接受三个参数：属性名（不带--前缀）、值和一个可选的优先级字符串（如// 设置全局自定义属性// 设置特定元素的自定义属性要获取自定义属性的值，你可以使用方法结合方法。注意，获取自定义属性时需要包括--前缀。
在vue中使用ElementUI实现主题切换，并给出具体实现
03-14
在Vue中使用ElementUI实现主题切换，可以通过以下步骤实现： 1. 在main.js中引入ElementUI的样式文件： import 'element-ui/lib/theme-chalk/index.css'; 2. 在App.vue中使用ElementUI的组件，并设置主题： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值