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

效果展示

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

相关推荐

  1. 使用Python实现循环神经网络(RNN)教程

    2024-07-16 05:32:04       27 阅读
  2. 使用Python实现长短时记忆网络(LSTM)教程

    2024-07-16 05:32:04       26 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-16 05:32:04       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-16 05:32:04       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-16 05:32:04       58 阅读
  4. Python语言-面向对象

    2024-07-16 05:32:04       69 阅读

热门阅读

  1. Eureka服务发现深度配置:实例ID与租约续期策略

    2024-07-16 05:32:04       27 阅读
  2. Android原生输入法输入数字

    2024-07-16 05:32:04       23 阅读
  3. 【面试题】手撕缓存LRU

    2024-07-16 05:32:04       29 阅读
  4. RocketMQ消费者依赖的业务Bean还未初始化完成

    2024-07-16 05:32:04       22 阅读
  5. 大数据如何推动工业数字化发展

    2024-07-16 05:32:04       23 阅读
  6. 【AI绘画教程】什么是Huggingface

    2024-07-16 05:32:04       26 阅读
  7. python开发面试-20240715

    2024-07-16 05:32:04       24 阅读
  8. 喜欢dp动态规划的第二天(暑假提升)

    2024-07-16 05:32:04       24 阅读