react组件封装

一、封装过那些组件 ( 组件封装 )

• 1、ABox

    *问：干嘛的？放其他子组件的盒子 有圆角 有阴影 带标题 还有标题右侧内容
    *title是盒子的标题
    *extraContent 放右侧内容
    *justify 右侧内容的对齐属性
    *children
    *className
    *style = {  }

• 2、AButton

    *问：功能？单排按钮 多排按钮 icon  icon图标的位置 
       icon的图标有点击事件滚动按钮 自定义的样式

    * AButton组件对外暴露的接口
    *<AButton 
        *dataSouce   // button 的数据
        *className
        *style
        *radiius         // nutton 的圆角
        *size            // button 的大小
        *justify         // button 按钮对齐的位置
        *iconDirection   // icon 的位置
        *spaction        // 按钮的左右间距
        *marginTop       // 多行按钮的上下间距
        *onOk            // 点击按钮的回调
        *onIcon          // 点击 Icon 的回调
        *支持antd button 的所有属性  
           通过...otherItem 来支持它能拿到antd所有的属性
    */>

    * 数据的驱动视图  dataSouce 对外暴露的接口
    *dataSouce = {
        *{
            *title: 按钮文字
            *icon: icon图标
            *disabled: 按钮禁用
            *ghost: true, // 幽灵按钮 antd 中的按钮样式
            *color: 幽灵按钮的颜色 
            // 支持 antd 所有的button属性
        *},
        *{
            *title: 按钮文字
            *icon: icon图标
            *disabled: 按钮禁用
        *}
    *}

暴露的接口

使用方式

API

• 3、ACard

    *style = {  }
    *children,
    *type = 'default', // 卡片类型 总共4中 red greenblue
    *title = '',
    *extra = '', //右上角区域
    *payment, // 默认未支付 Icon 图标
    *className

• 4、ADrawer

    *children 抽屉的子组件
    *maskClosable = false // 点击蒙版 抽屉是否可以关闭
    *btns = defaultButtons // 自定义抽屉的按钮
    *onClickBtns // 点击按钮的回调
    *abold //标题是否加粗
    *atitle //标题
    *onClose // 取消的回调
    *diyclose // 右上角的关闭

• 5、AForm封装表单

   * antd 表单的代码量非常大
   * antd 的表单不满足我们的需求 
       *1. select option 后面带 x 和 划过背景色
       *2. select 下拉加载
       *3. 日期的格式化
       *4. 表单的布局 比如 几个表单是一排的

   *<QForm 
     *dataSource 数据源
     *model 表单布局
   */>

• 6、AImage

    为啥封装：
    * 组件里监听图片加载是否失败 失败展示默认图片
    * 图片的懒加载 react-lazyload
  
    *src 图片地址
    *width 宽 
    *height 高
    *onClick 图片的点击事件
    *className
    *scrollContainer 懒加载滚动节点

• 7、ATab

    为什么封装
    * tab 三种定制的样式
    * 右侧的内容 封装了对齐方式 每个元素的占比大小

• 8、ATable

    *bordered
    *sticky
    *page
    *pageSize
    *pageSizeOptions = [10, 20, 30, 50, 100],
    *showSizeChanger = true,
    *showQuickJumper = true,

• 9、ATag

暴露的接口

使用方式

API

• 10、AIcon