| |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
-> JavaScript知识库 -> vue css动态 实现更换主题颜色效果!!! -> 正文阅读 |
|
[JavaScript知识库]vue css动态 实现更换主题颜色效果!!! |
写的不好 勿喷~!!!!!!!~~~~~~~~~~~~~~~~ 1.首先安装 npm i css-vars-ponyfill --s 这是一个可以改变css变量颜色的插件 ! ?2.在项目创建一个 scss 样式文件, 项目中需要用到scss 所以安装了scss css预处理器。设置一个全局样式,效果如下 还要在vue.config.js设置一下来个loader ?3. 在需要更换的颜色的地方 写上自己刚刚定义好变量的主题颜色,就可以更换主题色了。 ? 4. 个人自我感觉良好的写了两种更换的方案: 第一种是根据后台自定义修改颜色,然后在vue index.html输出的全局变量进行获取,然后进行更改(需要后端配合输出自定义颜色)。 第二种是根据用户自已个人意愿想换什么颜色就使用什么颜色(自主更换颜色板,这边就不做啦!) 直接上图: 4.1、第一种: 直接创建 .js 文件直接读取后端模板输出主题颜色? 写个 js函数 就可以进行修改了。 使用 variables 是用来修改自定义变量的颜色属性的 ?4.1.2、直接main.js引入就行了 ?4.2、第二种方法 就是利用 vuex 方法进行更换主题颜色 利用本地存储进行保存用户修改之后的颜色。上图安排:创建 vuex 文件 安装vuex main.js引入 (个人比较推荐这种写法,可能写的不太好,有改进的地方。望指出!) 4.2.1、先下载安装 vuex? ?4.2.2、创建 vuex 文件里面 写存储颜色的变量? ? ?4.2.3、接下来就是页面的使用了,页面直接使用就可以了。点击是用的异步的修改方法! ? ?到这就结束了!!!有更好的建议可以随时DD我!勿喷 写的比较菜!!!(记得点赞哦!) |
|
JavaScript知识库 最新文章 |
ES6的相关知识点 |
react 函数式组件 & react其他一些总结 |
Vue基础超详细 |
前端JS也可以连点成线(Vue中运用 AntVG6) |
Vue事件处理的基本使用 |
Vue后台项目的记录 (一) |
前后端分离vue跨域,devServer配置proxy代理 |
TypeScript |
初识vuex |
vue项目安装包指令收集 |
|
上一篇文章 下一篇文章 查看所有文章 |
|
开发:
C++知识库
Java知识库
JavaScript
Python
PHP知识库
人工智能
区块链
大数据
移动开发
嵌入式
开发工具
数据结构与算法
开发测试
游戏开发
网络协议
系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程 数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁 |
360图书馆 购物 三丰科技 阅读网 日历 万年历 2025年2日历 | -2025/2/5 20:13:23- |
|
网站联系: qq:121756557 email:121756557@qq.com IT数码 |