复选框

src/common/components/CheckBtn/index.jsx

@@ -0,0 +1,63 @@
+import React from 'react';
+/*import PropTypes from 'prop-types';*/
+import on from '@common/images/checked.png';
+import style from './index.less';
+
+/**
+ * 多选按钮
+ * handleClick:点击触发按键 会将输入的props信息作为参数传入
+ * isSelect:是否选中
+ * label:右侧显示文字
+ */
+class CheckBtn extends React.Component {
+  constructor(props){
+    super(props);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  handleClick(id){
+    this.props.handleClick(id);
+  }
+
+  getStyle(){
+    if(this.props.display=='block'){
+      return {
+        display:'block',
+        // marginBottom:'10px'
+      }
+    }
+    return {
+      display:'inline-block',
+      /*marginLeft:'10px'*/
+    }
+  }
+
+  render() {
+    const {id,label,isSelect,disabled} = this.props;
+    /*if(disabled){
+        return (
+            <div className={style['check-box']}
+                 style={this.getStyle()}>
+                <span className={style['img']}></span>
+                <span style={{color:'#aaa'}}>{label}</span>
+            </div>
+        )
+    }*/
+    return (
+      <div className={style['check-box']}
+           onClick={() =>this.handleClick(id)}
+           style={this.getStyle()}>
+        <span className={isSelect?style['on']:style['img']}></span>
+        <span>{label}</span>
+      </div>
+    )
+  }
+}
+
+/*Radio.propTypes = {
+    handleClick:PropTypes.func,
+    isSelect:PropTypes.bool,
+    name:PropTypes.string
+};*/
+
+export default CheckBtn;

src/common/components/CheckBtn/index.less

@@ -0,0 +1,24 @@
+.check-box{
+  max-width: 120px;
+  height: 35px;
+  line-height: 35px;
+  cursor: pointer;
+  .img{
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    vertical-align: middle;
+    margin-right: 4px;
+    background: #fff;
+    -webkit-appearance: none;
+    border: 1px solid #c9c9c9;
+    border-radius: 4px;
+    outline: none;
+    cursor: pointer;
+  }
+  .on{
+    .img;
+    background: url("../../images/first.png") no-repeat;
+    background-size: 93% 100%;
+  }
+}