antd原始碼解析——線上換膚功能

byteQiu發表於2018-08-03
原始碼

瑣碎的前言

組內需要搭建一個內部元件演示平臺，就去研究了下ant-design的原始碼。意外發現了藏在最下方友情連結欄中的換膚功能。如下圖所示：

antd原始碼解析——線上換膚功能

為了方便演示，我把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樣式

antd原始碼解析——線上換膚功能

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用法 參考

相關文章