antd在线换肤定制功能
最近react项目,用的antd框架,然后看见他的antdPro例子里面有个定制功能很帅,老大说做,那就做吧,鼓捣了一晚终于实现了。
css换肤
入行前端的时候经常看鱼哥(张鑫旭)的博客,记得看过 这篇 ,当时很惊叹,原理其实很简单,就是我们最能想到的方式,多个css,然后用JS替换从而达到换肤效果。但是这个有局限性,比如我们用的是antdUI库,我们不可能每个颜色都去搞个css吧。当时现在我们有less,sass,而且原生的css也有变量var了,所以新时代我们有新技术达到这个效果。
less换肤
其实antd官网是有 定制主题 的,但是是静态的,通过打包之前去设置一些config,less变量从而达到定制效果,但是这显然不是我们想要的==线上实时==换肤效果。
最初我的思路是用node去实时生成一个webpack.config.base的配置文件,但是这样只能在开发环境实现换肤,生成环境是没办法的。然后网上有人说,用less去生成多个css文件,这不又走了以前的老路吗。最后没办法我把antdPro的源码拿来看了下,终于找到了解决办法,antd-theme-generator
步骤
- 这里我的项目是在自己写的 webpack4-react脚手架 的基础上做修改的,如果你用的create-react-app或者其他的脚手架可能会有相应修改。
- 安装
cnpm i antd-theme-generator --save
- index.html
<body> <link rel="stylesheet/less" type="text/css" href="static/color.less" /> //主要是这个起作用 <script> window.less = { async: false, env: 'production' }; </script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js"></script> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> </body>
- 根目录添加color.js
const path = require('path'); const { generateTheme, getLessVars } = require('antd-theme-generator'); const options = { stylesDir: path.join(__dirname, './src/styles'), //对应具体位置 antDir: path.join(__dirname, './node_modules/antd'), //对应具体位置 varFile: path.join(__dirname, './src/styles/vars.less'), //对应具体位置 mainLessFile: path.join(__dirname, './src/styles/main.less'), //对应具体位置 themeVariables: [ '@primary-color', '@secondary-color', '@text-color', '@text-color-secondary', '@heading-color', '@layout-body-background', '@btn-primary-bg', '@layout-header-background' ], indexFileName: 'index.html', outputFilePath: path.join(__dirname, './src/static/color.less'), } generateTheme(options).then(less => { console.log('Theme generated successfully'); }) .catch(error => { console.log('Error', error); });
- src添加styles文件夹,里面有vars.less和main.less
//vars.less @import "~antd/lib/style/themes/default.less"; @link-color: #00375B; @primary-color: #00375B; :root { --PC: @primary-color; //color.less中加入css原生变量:--PC } //main.less //可为空,只是为了不报错才引入
- package.json
//为了每次自动node color.js,所以scripts里面修改下 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node color && webpack-dev-server --config webpack.config.dev.js", "start": "npm run dev", "build": "node color && webpack --config webpack.config.prod.js" },
- 使用,启动后直接window.less.modifyVars就可以了
window.less .modifyVars( { '@primary-color': '#ee5e7b', '@link-color': '#ee5e7b', '@btn-primary-bg': 'ee5e7b', } ) .then(() => { }) .catch(error => { message.error(`Failed to update theme`); });
- 最后,打包后注意放入环境后打开,否则会报错。
原理
我们发现其实他生效主要就是靠color生成一个color.less文件,然后我打开color.less文件看了下,发现原来是利用的less可以写逻辑这个特性实现的,从而通过window.less.modifyVars去动态的改变less变量。
其他
现在antd的换肤问题解决了,但是我们自己的css样式怎么办呢,比如我有个标题想用主题色,我怎么去拿到这个颜色呢。
+ 起初我是这样实现的vars.less增加
//vars.less .primary-color{ color:@primary-color }
这样.primary-color就会打入生成的color.less里面,然后我们就可以用了,当时这样有些地方就不方便,比如
box-shadow: 1px 1px 1px 1px #d23333;,我们怎么办,难道每次都要写在vars.less里面吗
+ 所以这里我用了css的原生变量var
//vars.less :root { --PC: @primary-color; }
然后就可以使用
box-shadow: 1px 1px 1px 1px var(--PC);
本地保存
用户设置颜色后,可以用缓存或者localStorage保存,这就不多说了
预览效果
源码
最后
阅读更多大家好,这里是「 TaoLand 」,这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是自己第一次做博客,希望和大家多多交流,一起成长!文章将会在下列地址同步更新……
个人博客:www.yangyuetao.cn
小程序:TaoLand
- antd在线换肤定制功能
- php + html5 + javascript 实现在线潜水服定制功能
- 微信小程序一键生成源码 在线制作定制功能强大的微信小程序
- 使用Ajax实现换肤功能
- A利用ASP小偷和Google实现在线翻译功能的代码
- java在线聊天项目0.4版本 制作服务端接收连接,客户端连接功能 新增客户端窗口打开时光标指向下边文本域功能,使用WindowListener监听WindowAdapter
- java在线聊天项目1.3版 ——设计好友列表框功能
- centos6.5下系统编译定制iptables防火墙扩展layer7应用层访问控制功能及应用限制QQ2016上网
- 编译自己功能定制的Fedora7内核
- Android一键换肤功能:一种简单的实现
- 广州APP开发公司:服装商城app定制开发的主要功能
- Android学习之 换肤功能模块的实现<三>
- 墨子题库系统全新2.0版正式发布-增加在线考试功能
- Extjs上传附件实战开发,实现批量上传及在线预览功能(四)
- springboot整合tomcat自带的websocket实现在线聊天及象棋网页对战功能
- Redis在唯品会的应用实践-架构演进与功能定制
- 怎么样在WEB上实现office在线编辑的功能
- Dynamics CRM 定制标准导出功能:不能导出指定列的值
- Android自定义view实现电影票在线选座功能
- 《BREW进阶与精通――3G移动增值业务的运营、定制与开发》连载之48---BREW SDK 九大功能之文件系统