vue 动态切换class 循环_ant-design-vue运行时动态切换主题色

  • Post author:
  • Post category:vue



1.创建项目

使用vue-cli V3.0+创建项目

vue create antd-vue-theme-demo
e1ac4c9d1efef1aec3b4b4dbb9c5dc39.png

选择css预处理器(其他的根据项目所需选择)

c6f21dc79759a10fbb45db59059633e4.png

由于ant-design-vue的样式使用的是less作为开发语言,所以这里我们选择Less

793ff9d879139333149decf5d842b2c8.png

其他的根据自己的需要配置即可,创建完成

3c94757b1db3e66891c09c11f22a451e.png

注意:项目创建完成后,需要将less的版本号改成3.0以下,否则后面再更改主题时会出错,这里改成了2.7.2

f140d2450b1e1c74a756aa2b85d54985.png

改完后保存,并重新下载依赖

yarn install

下载完后启动项目

yarn serve

在浏览器输入

localhost:8080

就可以看到创建好的项目

53b82614f590174322d6a1e469c11c0a.png

项目已经启动成功,接下来ant-design-vue


2.安装ant-design-vue

yarn add ant-design-vue

然后在main.js中添加所需的antd组件

注意:ant-design-vue支持完整引入和按需加载,这里我们不要用完整引入,后面会讲官方建议的按需引入babel-plugin-import

9c0d1f6cfdf37934efd8f25d01b0df47.png

在HelloWorld.vue中使用组件,删除其他不必要的代码,然后添加一个按钮

1edb3c85b1edd9874ca8e40077921656.png

重新启动项目,刷新浏览器,即可看到默认主题的按钮

2dc60af016b4fc3171a339331dd55c4a.png


3.安装babel-plugin-import

可以使用 babel-plugin-import 的方式按需引入组件(官方推荐)

yarn add babel-plugin-import

在babel.config.js中添加配置

module.exports = {  presets: [    '@vue/app'  ],  plugins: [    ["import", {      libraryName: "ant-design-vue",      libraryDirectory: "es",      style: true    }]  ]}


定制主题(静态)

在项目根目录下新建文件vue.config.js,添加如下代码

// vue.config.js module.exports = {  css: {    loaderOptions: {      less: {        modifyVars: {          "primary-color": "#1DA57A",          "link-color": "#1DA57A",          "border-radius-base": "2px"        },        javascriptEnabled: true      }    }  }};

保存重启并访问页面后就可以看到定制的主题了

3ce886c1e1ef85aeedce699280f63bf2.png

但官方提供的这种方式只能在编译时改变主题,无法在运行性动态切换。下面就是本文的重点,如何实现在运行时动态切换主题。

提取antd的less变量文件

我们的思路就是提取ant-design-vue中所有的less代码汇总到一个文件中,然后在index.html页面中直接引用,最后使用less.js中的modifyVars方法修改主题变量,这样antd的样式就不会被编译,实现运行时动态切换。


4.【重点】安装antd-theme-webpack-plugin

1.首先安装提取less文件的插件antd-theme-webpack-plugin

yarn add antd-theme-webpack-plugin

2、修改vue.config.js,配置并使用插件

68b9206cd459b2d8d777fb8cb2272bb9.png

注:可以参考一下两个网址

1.https://github.com/mzohaibqc/antd-theme-webpack-plugin

2.https://medium.com/@mzohaib.qc/ant-design-dynamic-runtime-theme-1f9a1a030ba0

3.新建文件variables.less、index.less,options 中的路径一定要和实际项目一致

1c50c514ab50d0f09775e137e06e3f3f.png

index.less可以为空

variables.less文件中添加主题变量

@import "~ant-design-vue/lib/style/themes/default.less";@primary-color: #992777;

4.然后yarn serve 运行项目就可以在你设置的目录下看到提取的less文件了

14d92341a5594d7da36ed2e0e797f328.png

color.less文件已经拿到,接下来就好办了


5.定制主题

1.修改index.html(注意红框内)

0b5ddc2745a43f06249074cc560b1438.png

2.使用window.less.modifyVars()方法修改主题

2b1713cea66273d2fa7fc9e323dfc51b.png

3.效果

deda9e881a50e6d184a92ac4cacf3421.png

4.最终效果

bb0b40b71b1335b643cab4e19e2455ea.png



版权声明:本文为weixin_33865942原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。