Merge pull request #895 from Jackyzm/master

解决多个Message重叠的bug、checkbox文档错误

site/docs/en-US/checkbox.md

@@ -49,7 +49,7 @@ constructor(props) {
 }
 render() {
   return (
-    <Checkbox.Group options={this.state.checkList}>
+    <Checkbox.Group value={this.state.checkList}>
       <Checkbox label="Option A"></Checkbox>
       <Checkbox label="Option B"></Checkbox>
       <Checkbox label="Option C"></Checkbox>
@@ -250,6 +250,7 @@ render() {
 ### Checkbox-group Attributes
 | Attribute      | Description         | Type    | Options                         | Default|
 |---------- |-------- |---------- |-------------  |-------- |
+| value   | Used for setting the currently selected value   | string[]  | - |    []     |
 |size | the size of checkbox buttons | string | large/small | —
 |fill  | border and background color when button is active | string   | — | #20a0ff   |
 |textColor | font color when button is active | string   | — | #ffffff   |

site/docs/en-US/message-box.md

@@ -125,6 +125,7 @@ The corresponding methods are: `MessageBox`, `MessageBox.alert`, `MessageBox.con
 | Attribute      | Description          | Type      | Accepted Values       | Default  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | title of the MessageBox | string | — | — |
+| customClass | The class name of the container of the modal dialog | string | — | - |
 | message | content of the MessageBox | string/ReactElement | — | — |
 | type | message type, used for icon display | string | success/info/warning/error | — |
 | customClass | custom class name for MessageBox | string | — | — |

site/docs/zh-CN/checkbox.md

@@ -249,6 +249,7 @@ render() {
 ### Checkbox.Group Attributes
 | 参数      | 说明    | 类型      | 可选值       | 默认值   |
 |---------- |-------- |---------- |-------------  |-------- |
+| value   | 指定选中的选项   | string[]  | - |    []     |
 | size     | Checkbox 按钮组尺寸   | string  | large, small  |    —     |
 | fill  | 按钮激活时的填充色和边框色    | string   | — | #20a0ff   |
 | textColor  | 按钮激活时的文本颜色    | string   | — | #ffffff   |

site/docs/zh-CN/message-box.md

@@ -118,6 +118,7 @@ import { MessageBox } from 'element-react';
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | title | MessageBox 标题 | string | — | — |
+| customClass | 对话框外层容器的类名 | string | — | - |
 | message | MessageBox 消息正文内容 | string/ReactElement | — | — |
 | type | 消息类型，用于显示图标 | string | success/info/<br>warning/error | — |
 | lockScroll | 是否在 MessageBox 出现时将 body 滚动锁定 | boolean | — | true |

src/cascader/Cascader.jsx

@@ -56,8 +56,8 @@ class Cascader extends Component {
         });
 
         before.then(() => {
-            this.handleInputChange(value);
-          });
+          this.handleInputChange(value);
+        });
       } else {
         this.handleInputChange(value);
       }
@@ -325,7 +325,7 @@ class Cascader extends Component {
             readOnly={!filterable}
             placeholder={currentLabels.length ? undefined : this.placeholder()}
             value={inputValue}
-            onChange={value => { this.setState({inputValue: value}) }}
+            onChange={value => { this.setState({ inputValue: value }) }}
             onKeyUp={this.debouncedInputChange.bind(this)}
             size={size}
             disabled={disabled}
@@ -337,11 +337,11 @@ class Cascader extends Component {
                 />
               ) : (
                 <i
-                  className={this.classNames('el-input__icon el-icon-caret-bottom', {
-                    'is-reverse': menuVisible
-                  })}
-                />
-              )
+                    className={this.classNames('el-input__icon el-icon-caret-bottom', {
+                      'is-reverse': menuVisible
+                    })}
+                  />
+                )
             }
           />
           <View show={currentLabels.length}>
@@ -370,7 +370,9 @@ Cascader.childContextTypes = {
 };
 
 Cascader.propTypes = {
-  options: PropTypes.array.isRequired,
+  options: PropTypes.arrayOf(PropTypes.shape({
+    value: PropTypes.string
+  })).isRequired,
   props: PropTypes.object,
   value: PropTypes.array,
   placeholder: PropTypes.string,
@@ -400,7 +402,7 @@ Cascader.defaultProps = {
     value: 'value',
     disabled: 'disabled'
   },
-  beforeFilter: () => (() => {})
+  beforeFilter: () => (() => { })
 }
 
 export default ClickOutside(Cascader);

src/message-box/MessageBox.jsx

@@ -54,7 +54,7 @@ export default class MessageBox extends Component {
   }
 
   typeClass(): string {
-    return this.props.type && typeMap[this.props.type] && `el-icon-${ typeMap[this.props.type] }`;
+    return this.props.type && typeMap[this.props.type] && `el-icon-${typeMap[this.props.type]}`;
   }
 
   validate(value: string): boolean {

src/message/Message.jsx

@@ -5,8 +5,16 @@ import Toast from './Toast';
 
 export default function Message(props = {}, type) {
   const div = document.createElement('div');
-
-  document.body.appendChild(div);
+  const messageBox = document.getElementsByClassName('el-message-content')[0];
+  if (messageBox) {
+    messageBox.appendChild(div);
+    document.body.appendChild(messageBox);
+  } else {
+    const messageBox = document.createElement('div');
+    messageBox.className = "el-message-content";
+    messageBox.appendChild(div);
+    document.body.appendChild(messageBox);
+  }
 
   if (typeof props === 'string' || React.isValidElement(props)) {
     props = {
@@ -20,8 +28,9 @@ export default function Message(props = {}, type) {
 
   const component = React.createElement(Toast, Object.assign(props, {
     willUnmount: () => {
+      const messageBox = document.getElementsByClassName('el-message-content')[0];
       ReactDOM.unmountComponentAtNode(div);
-      document.body.removeChild(div);
+      messageBox.removeChild(div);
 
       if (props.onClose instanceof Function) {
         props.onClose();