Skip to content

开发指南

Jump to bottom
梁森 edited this page Jun 27, 2017 · 16 revisions

开发环境

npm i && npm start

浏览器打开http://localhost:3000, Bingo🍺

组件接口

目前提供了几个基础组件, Component, PropTypes, Transition和View.

Component

为了保持组件的可控性, 所有自定义组件都需要继承于此Component, 而不是React.Component.

  • 属性

  • className [String], 可以将className附加到组件的根元素的class上.

  • style [Object], 可以将style附加到组件的根元素的style上.

  • 方法

  • classNames(className, ..., className), 使用方法参照[1], 返回类型为String.

    <div className={this.classNames('el-alert', `el-alert--${ this.props.type }`)}>
 ...
</div>

PropTypes

继承了React所有的PropTypes, 并提供了一些通用的自定义类型, 所有的自定义组件不推荐使用React.PropTypes.

  • range(min, max)
  • regex

Transition

目前只是react-addons-css-transition-group的封装.

  • 属性

    • name [String], Vue的transition的实现, 参考[3].
    • duration [String/Number]
    • component [String]
    • className [String]
    • style [Object]
      // Vue
  <transition name="el-alert-fade">
  ...
  </transition>

  // React
 <Transition name="el-alert-fade" duration="300">
 ...
 </Transition>

View

  • 属性

  • show [any], Vue的v-show的实现, 参考[2].

    // Vue
<i class="el-alert__closebtn" :class="{ 'is-customed': closeText !== '', 'el-icon-close': closeText === '' }" v-show="closable" @click="close()">{{closeText}}</i>

// React
<View show={this.props.closable}>
<i className={this.classNames('el-alert__closebtn', this.props.closeText ? 'is-customed' : 'el-icon-close')} onClick={this.close.bind(this)}>{this.props.closeText}</i>
</View>

单元测试

项目使用jest来做单元测试, 执行以下命令:

npm test

因为组件使用了react-dom, 但是react-dom只允许初始化一次, 所以目前jest还无法正常测试React组件, 待react升级到15.4.0, 参考issue: https://github.com/facebook/jest/issues/1353

UI自动化测试

TODO

Tasks

  • es-lint

    npm run lint

贡献代码

代码规范请参考 CONTRIBUTING.md

References

  1. https://github.com/JedWatson/classnames
  2. https://vuejs.org/guide/conditional.html#v-show
  3. https://vuejs.org/guide/transitions.html#Transitioning-Single-Elements-Components
Clone this wiki locally