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 | false |

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