高性能方案實現ant-design-vue在運行時動態改變主題色(利用webpack-theme-color-replacer)

今天利用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-...

實現效果:

初始主題色:

clipboard.png

切換後主題色:

clipboard.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章