今天利用webpack-theme-color-replacer插件,爲ant-design-vue實現了在運行時動態切換主題色的功能,無需在頁面進行less的編譯,提升了切換速度。有需要的同學可以參考下。
效果預覽:http://test.hz300.com/ant-des...
在右側中央的配置按鈕點開可以切換主題色。
實現方案:
方案是統一的,見之前的文章:https://segmentfault.com/a/11...
基本步驟:
基於 ant-design-pro-vue 這個項目上進行修改:
1、webpack加入插件配置:查看修改:
https://github.com/hzsrc/ant-...
2、運行時動態切換主題色,查看修改:
https://github.com/hzsrc/ant-...
新增文件:
https://github.com/hzsrc/ant-...
實現效果:
初始主題色:
切換後主題色: