快速上手

安装

• 通过npm安装

  
  npm install antd --save
                  

• 页面直接引用需要自行构建

样式引用（全局）

• 引用CSS文件

  
  import 'antd/dist/antd.css'
                  

• 引用LESS文件

  
  import 'antd/dist/antd.less'
  import 'src/style/customized_vars.less' //自定义变量覆盖默认样式
                  

按需加载组件代码

• 引用LESS文件

  
  import DatePicker from 'antd/lib/date-picker'
                  

• 使用插件 babel-plugin-antd

  在babel的参数中加上此插件，也可实现按需加载

  另：在新版本中，使用插件形式也可以通过配置将CSS样式也进行样式按需加载

组件实际使用方法和技巧

表格 Table

表格 Table

基本用法

• dataSource为数据，数组形式
• columns为配置，配置每一列对应的数据字段和显示内容

展示特定的内容

• 配置render选项，三个参数data, record, index
• 实例

表格 Table

列配置

// 序号，姓名，联系电话，电子邮箱，学习意向，商机状态，工单状态，责任人，创建时间，操作
// 获取Table的列设置
getTableColumns() {
  return [
    {
      title: '序号',
      dataIndex: 'id',
      key: 'id'
    }, {
      title: '姓名',
      dataIndex: 'name',
      key: 'name'
    }, {
      title: '联系电话',
      dataIndex: 'phone',
      key: 'phone'
    }, {
      title: '电子邮箱',
      dataIndex: 'email',
      key: 'email'
    }, {
      title: '学习意向',
      dataIndex: 'studyIntention',
      key: 'studyIntention',
      render(studyIntention) {
        return studyIntention && studyIntention.length && studyIntention.join(', ');
      }
    }, {
      title: '商机状态',
      dataIndex: 'clue',
      key: 'clue',
      render(clue, record, index) {
        return clue && CLUE_STATUS[clue.statusId];
      }
    }, {
      title: '工单状态',
      dataIndex: 'chance',
      key: 'chance',
      render(chance, record, index) {
        return chance && CHANCE_STATUS[chance.statusId];
      }
    }, {
      title: '责任人',
      dataIndex: 'creator',
      key: 'creator',
      render(creator, record, index) {
        return creator && creator.name;
      }
    }, {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render(text, record, index) {
        return moment(text).format('YYYY-MM-DD');
      }
    }, {
      title: '操作',
      key: 'operation',
      render: (text, record, index) => {
        return (
          <span>
            {(() => {
              if(func.checkPermissionOperation('crm_student-view')) {
                return (
                  <Link to={`${this.props.routes[1].path}/student/${record.id}/show`}>查看</Link>
                )
              }
            })()}
            {(() => {
              if(func.checkPermissionOperation('crm_student-update')) {
                return (
                  <span>
                    <span className="ant-divider"></span>
                    <Link to={`${this.props.routes[1].path}/student/${record.id}/edit`}>编辑</Link>
                  </span>
                )
              }
            })()}
          </span>
        );
      }
    }
  ]
},
            

分页配置 pagination

• 可前端分页和后端分页
• 基本参数
• onChange事件和onShowSizeChange事件

其他的一些用法

• loading状态
• 列选择 rowSelection
• 过滤 filter

Form 表单

涵盖范围

• 表单封装：Form、Form.Item
• 表单控件包括：Input, Cascader, Checkbox, DatePicker, InputNumber, Radio, Rate, Select, Slider, Switch, TimePicker, Transfer, TreeSelect, Uplaod

整体表单封装：Form.create

• 类似于Redux中的Connect方法，同样通过map函数映射数据
• 在原有组件的外部加了一层Wrapper以方便对表单组件进行数据双向绑定
• 通过外部Wrapper的State来追踪内部表单的变化
• 通过外部Wrapper传递的方法实现类似Mixins的效果

整体表单封装

• 数据绑定
• 数据收集
• 数据映射
• 表单提交

整体表单封装：数据映射

• this.props.form.getFieldProps('id')
• getFieldProps 返回的属性包括 id、value（或你设置的其它 valuePropName）、ref、onChange（或者你设置的其它 trigger validateTrigger），所以不应再设置同样的属性，以免冲突。

整体表单封装：数据收集

• 整体收集：this.props.form.getFieldsValue()
• 单个收集：this.props.form.getFieldValue()

整体表单封装：表单提交

• onSubmit事件
• 表单验证通过后才会触发

表单组件的封装：Form.Item

• 设置Label
• 设置表单组件的布局
• 设置表单的帮助信息（校验提示）

表单组件的校验：async-validator

• Required、Enumerable验证
• Length、Range验证
• Type验证
• 自定义Validator函数

表单组件的校验

• 作为getFieldProps的第二个参数传递
• 设置相应的校验规则和触发规则

项目中表单组件封装

额外的收获

Ant-Tool：蚂蚁金服新一代构建和调试工具

• 快速构建
• Dora调试：基于koa，整合webpack，livreload，browsersync，数据mock，本地代理、weinre、jsonapi
• 测试：mocha + chai + sinnon
• 文档生成：结合gh-pages

Ant-Tool

Dora-js 由来

整合前端的各类自动化任务，减轻前端工程化后开发过程中大量的重复劳动

Ant-Tool

Dora-js 特性

• 使用 Webpack 打包，优化输出
• 使用Koa启动的服务来运行这些插件
• 基于Koa的中间件机制，将各种插件封装成中间件，提供多个回调时间点，让插件能够更好的并存
• HMR 和 Livereload
• 错误提示直接输出至浏览器

其他的资源

• 其他非官方实现，vue-antd和vue-ember （可惜不是太稳定）
• Ant Design Axure Components & Axure Box 为了让我们有更好看的原型，请安利给产品们
• Ant UX 为了让某种绿色别再出现，请安利给设计们（顺便可以安利Sketch）

未来的可能发展

• Typescript 的支持
• 响应式的支持
• 新的颜色系统和icon设计
• 服务器端渲染？
• 富文本编辑器？