antd-components-plus

1. 对 Antd 组件进行二次封装和扩展，对业务系统更加友好
2. 增加了水印组件

Install

npm install antd-components-plus
 // or
yarn add antd-components-plus

Antd Version

3.x

Usage

Select

import {
    Select
} from 'antd-components-plus'

export default ()=>{
    return <div>
        <Select  dataSource={{0:'开始',1:'进行中',1:'暂停'}}/>
        <Select  dataSource={[{key:'0',label:'有效'},{key:'1',label:'无效'}]}/>
        <Select
            dataSource={[{userid:'0',name:'abel'},{userid:'1',name:'Li Lei'}]}
            fieldNames={{key:'userid',label:'name'}}
        />
        <Select
            getOption={({label,key,...otherProps})=>{
                return <Select.Option key={key}>[{otherProps.type}]-{label}<Select.Option>
            }}
        />
    </div>
}

属性说明

属性名	说明	类型	默认值
dataSource	可选项	object	array
fieldNames	字段映射	object	{ label: 'label', key: 'key', value: 'key' }
getOption	自定义 option	funciton	optiom => ({ label: optiom[fieldNames.label], key: optiom[fieldNames.key],value: optiom[fieldNames.value ,fieldNames.key] })
allOption	添加全部选项，可以通过传递对象覆盖全部选项的设置 { key: '', label: '全部' }	Boolean	Object

DatePickerRange

import { DatePicker } from 'antd-components-plus';

const { RangePicker } = DatePicker;

export default (filterValue) => {
  return (
    <div>
      <DatePicker
        defaultValue={filterValue.start_date}
        onChange={(value) => {
          console.log(value); // typeof value => string
        }}
      />
      <RangePicker
        names={['start_date', 'end_date']}
        defaultValue={[filterValue.start_date, filterValue.end_date]}
        onChange={(value) => {
          console.log(value); // typeof value => {start_date:string,end_date:string}
        }}
        format="YYYY-MM-DD"
      />
      <RangePicker
        defaultValue={[filterValue.start_date, filterValue.end_date]}
        onChange={(value) => {
          console.log(value); // typeof value => [string,string]
        }}
      />
    </div>
  );
};

属性说明

属性名	说明	类型	默认值
value	对 value 会自动进行修正，无需关注值是否有效。只需在dateRange传入数组，如果是dataRange，传入的 value，两个值都会undefined，则会将值整体改为undefined	string	string[]
momentValue	默认将 datepicker 的值改为 string，添加此参数则返回moment对象	boolean	false
names	方便后续使用，可以将返回值改为对象，按照数据传递的顺序赋值，仅 RangePicker 拥有	array	-

Watermark

import { Watermark } from 'antd-components-plus';

// 建议在容器层使用
export default const Layout = () => {
  return (
    <div>
      {/* 会在当前页面的所有含有 .ant-table 的元素下生成一个定位的div(背景水印) */}
      {/* 如果某个页面选择器选中的元素不用水印 在其外层元素上添加类名 .ignore-watermark */}
      <Watermark content={'水印文字'} selector={'.ant-table'} >
        <Menu {...menuProps} />
        <Header {...headerProps} />
        <div className={classnames({ [styles.layoutContainer]: !isDashboard })}>
          <Authorize {...props} currentAuth={userInfo.isAdmin} />
        </div>
      </Watermark>
      {/* 组件外的元素不会添加水印 */}
      <Info>
    </div>
  );
};

属性说明

属性名	说明	类型	默认值
content	水印文案	string	'请勿外传'
width	水印宽度	string	'200px'
height	水印高度	string	'150px'
selector	要添加水印的容器类名	string	''
ignoreSelector	不添加水印的容器类名(不能用逗号隔开)	string	'.ignore-watermark'
color	填充绘画的颜色	string	'rgba(184, 184, 184, 0.8)'
opacity	水印透明度	number	0.2
rotate	旋转角度	number	-21
textAlign	文字对齐方式	string	'center'
textBaseline	绘制文本时的当前文本基线	string	'middle'
font	文本内容的当前字体属性	string	'20px microsoft yahei'

License

MIT