React 组件封装之 Card 卡片

一、Card 卡片

组件说明：
使列表成为卡片形式的布局。

效果展示：

二、使用案例

import {Card} from 'share';
import React from 'react';
export default class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          dataList:[{
	         productImgs:"",
	         desc:"这是一段描述",
	         createTime:"2019-9-29",
	         productPrice:200
         }]
       }
    }
    render(){
     const {dataList} = this.props;
      return      <div className="cm-plr-018">
                    {dataList.length>0?dataList.map((item,index)=>{
                            var productImgs = item.productImgs && item.productImgs.split(",");
                            var desc = item.productDesc && item.productDesc.slice(0,28);
                            return(
                                <Card key={index}>
                                    <div className="cm-flex cm-jc-sb cm-ai-c cm-plr-009 cm-ptb-018">
                                        <div className="cm-flex cm-ai-c">
                                            <img src={productImgs[0]} alt="" className="cm-img-14"/>
                                            <div className="cm-ml-018 cm-flex-1">
                                                <div className="cm-c-333 cm-fs-026">{desc}</div>
                                                <div className="cm-c-main cm-fs-030 cm-mt-018">￥{item.productPrice}</div>
                                                <div className="cm-c-999 cm-pt-018 cm-fs-022">{getTimeFormat(item.createTime)}</div>
                                            </div>
                                        </div>
                                    </div>                                 
                                </Card>
                            )
                        }):                    
                    }
                </div>
    }
}

三、API 使用指南

属性	说明	类型	默认值
onClick	点击卡片的回调	Function	无

四、源代码

index.js

import React from 'react';
import {defaultProps} from './defaultProps';
import './index.css';
export default class Card extends React.Component {
    static defaultProps = defaultProps;
    render(){
        let {onClick,prefixCls} = this.props;
        return(
            <div className={prefixCls} onClick={()=>onClick?onClick():""}>
                {this.props.children}
        </div>
        )
    }
}

index.less

@import '../default';
@prefixCls: s-card;

/* 默认搜索bar */
.@{prefixCls}{
  //display: flex;
  margin: (@size-10)-2 0;
  padding:(@size-10)/(@size-10);
  box-shadow: 2px 2px 2px 2px #eee;
  background: #fff;
  border-radius: 1px;
}

defaultProps.js

export const defaultProps = {
    prefixCls: 's-card',
};