组件库的使用和自定义组件

Alcadias
347 阅读2分钟

Arco Design

项目搭建

image.png

image.png

image.png

组件库的使用

  • 完整引入
  • 按需引入
  • 通过CDN引入

主题订制

  • 通过CSS进行样式覆盖
  • 修改Less变量
//在less 文件里修改
import '@arco-design/web-react/dist/css/index.less ';
arcoblue-6: #b52828;

//webpack.config.js
module.exports = {
    rules: [{
    test: /\.less$/,
    use: [{
        loader: 'style-loader',
    }, {
        loader: 'css-loader',
    }, {
        loader: ' less-loader',
        options: {
            modifyVars: {
            'arcoblue-6':'#b52828',
            },
            javascriptEnabled: true
        },
        }],
    }],
}

暗黑模式

在不同模式下改变的只有颜色。尺寸、边距等没有改变

image.png

image.png

局部应用暗色模式

核心思路：本质上是控制暗色颜色变量的挂载位置,提高我们所需要的颜色变量的优先级

语言国际化

image.png

image.png

image.png

直接通过ConfgProvider 组件传入不同语言文件去修改Locale

RTL视图

image.png

实现浅析：

  • 元素方向 RTL
  • 布局RTL
  • 交互行为RTL
  • 其他处理

image.png

全局配置组件默认属性

configprovider组件，修改默认的属性值

通过ConfgProvider的componentConfg 属性，传入定义好的配置文件，组件配置将会对ConfigPorvider组件所包裹的所有组件生效

image.png

自定义组件

搭建业务组件库

1.架构设计

  • 单包架构： 一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

优点:

  1. 公共代码易复用
  2. 展示更聚合，便于维护
  3. 引入一个包即可使用全部组件

缺点:

  1. 修改一个组件需要更新整个库
  2. 需要考虑按需加载
  • 多包架构： 一个代码仓库包含多个组件代码，会发布出去多个npm包。

优点:

  1. 单独发包，升级灵活。
  2. 在同一仓库下，便于代码管理
  3. 使用者无需考虑按需加载

缺点:

  1. 组件间相互依赖时，需要通过npm 包引入
  2. 组合使用时需要安装每一个用到的npm 包

2.技术方案

image.png

3.对外文档

image.png

什么是好的组件？

image.png

高内聚，低耦合：

职责清晰，高可维护性

对外提供简单稳定的接口，对内关注内部逻辑的实现。组件和组件之间能简单的配合实现定制的功能。 比如:Popver直接嵌套Input即可实现∶在输入框聚焦时显示气泡提示内容。

通用性，易拓展：

基础组件适用广泛的业务场景

比如金融，电商，政务等业务

平台业务组件适用于针对性平台

具备显著的业务属性，一般基于基础组件开发。比如:通过关键字调接口搜索Lark群聊

项目组织

  • 语义化命名
  • 包名和组件名最后一致
  • 单独维护类型文件

组件设计

  • 组件属性定义
  • 类名前缀统─
  • 避免行内样式
  • 避免在JS 中耦合css
  • 注意样式的按需加载
avatar
文章
阅读
粉丝