antd 按需加载,antd定制主题,antd上传组件,在线换肤

博客介绍了antd相关使用方法,包括按需加载组件和样式,借助babel模块化导入插件,可减少包大小;定制主题可通过less的modifyVars方式,在webpack中配置;还提及了antd上传组件及在线换肤,并给出相关学习地址。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

antd 按需加载组件,antd按需加载样式

使用 babel-plugin-import,babel模块化导入插件,兼容antd,antd-mobile,lodash等库

配置:{ "libraryName": "antd", style: "css" }

使用style:导入真正的css源文件,并且可以在编译期间进行优化。

style: "css":预先捆绑的css文件按原样导入。相当于:require('antd/lib/button/style/css');

style: true:可以减少包大小。相当于:require('antd/lib/button/style');

学习地址:https://github.com/ant-design/babel-plugin-import

antd定制主题

使用 less 提供的 modifyVars 的方式进行覆盖变量

less.modifyVars({
  '@buttonFace': '#5B83AD',
  '@buttonText': '#D9EEF2'
});

在webpack中定制,对 less-loader 的 options 属性进行 modifyVars 的配置。

// webpack.config.js
module.exports = {
  rules: [{
    test: /\.less$/,
    use: [{
      loader: 'style-loader',
    }, {
      loader: 'css-loader', // translates CSS into CommonJS
    }, {
      loader: 'less-loader', // compiles Less to CSS
+     options: {
+       modifyVars: {
+         'primary-color': '#1DA57A',
+         'link-color': '#1DA57A',
+         'border-radius-base': '2px',
+         // or
+         'hack': `true; @import "your-less-file-path.less";`, // Override with less file
+       },
+       javascriptEnabled: true,
+     },
    }],
    // ...other rules
  }],
  // ...other config
}

antd上传组件

async () => {
  if (value.attachment && value.attachment.file) {
    const formData = new FormData();
    const filedata = value.attachment && value.attachment.file;
    formData.append("file", filedata.originFileObj);
    formData.append("type", "file");
    // 使用接口上传上去,获取到文件的url之后在进行保存工作
    const fileurl = await http.post("/uploads", formData, {
      "Content-Type": "multipart/form-data"
    });
    value.attachment = fileurl.data.url;
  }
  // 下面做保存
  // ....
};

在线换肤

https://segmentfault.com/a/1190000018593994?utm_source=tag-newest

antd-theme-generator https://yq.aliyun.com/articles/662349

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值