码迷,mamicode.com
首页 > 其他好文 > 详细

antd源码解析——在线换肤功能

时间:2020-05-26 11:56:37      阅读:124      评论:0      收藏:0      [点我收藏+]

标签:byte   色值   tst   variable   演示   lang   cat   ati   调用   

琐碎的前言

组内需要搭建一个内部组件演示平台,就去研究了下ant-design的源码。意外发现了藏在最下方友情链接栏中的换肤功能。如下图所示:

技术图片

 

为了方便演示,我把colorpicker的position改为fixed

colorpicker

调用方式

<ColorPicker
    type="sketch"
    small
    color={color}
    position="top"
    presetColors={[
    ‘#F5222D‘,
    ‘#EB2F96‘,
    ...
    ]}
    onChangeComplete={this.handleColorChange}
/>
复制代码

事件监听

下面是监听colorpicker的onChangeComplete事件的回调

handleColorChange = (color) => {
    const changeColor = () => {
      const { intl: { messages } } = this.props;
      window.less.modifyVars({ // 关键步骤,修改less颜色变量值
        ‘@primary-color‘: color,
      }).then(() => {
        message.success(messages[‘app.footer.primary-color-changed‘]); // 通知换肤成功
        this.setState({ color }); // 回填颜色值
      });
    };

    const lessUrl = ‘https://cdnjs.cloudflare.com/ajax/libs/less.js/2.7.2/less.min.js‘;

// lessLoaded 用来标志 less.js 是否已加载,没有则去请求
    if (this.lessLoaded) {
      changeColor();
    } else {
      window.less = {
        async: true, // 设为异步加载
      };
      loadScript(lessUrl).then(() => {
        this.lessLoaded = true;
        changeColor();
      });
    }
  }
复制代码

elements

color.less中就存放了less颜色变量(@primary-color),每次修改颜色后都会去重置对应less变量,编译出新的css样式

技术图片

 

less.modifyVars()

官网解释:Enables run-time modification of Less variables. When called with new values, the Less file is recompiled without reloading.

换肤最关键的一步就是less.modifyVars()的调用,主要是针对less变量的修改覆盖。用法如下:

less.modifyVars({
  ‘@buttonFace‘: ‘#5B83AD‘,
  ‘@buttonText‘: ‘#D9EEF2‘
});
复制代码

更多less用法


作者:byteQiu
链接:https://juejin.im/post/5b63b2ece51d4519185376fa
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

antd源码解析——在线换肤功能

标签:byte   色值   tst   variable   演示   lang   cat   ati   调用   

原文地址:https://www.cnblogs.com/chenzxl/p/12964577.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!