antd-components-plus

1.2.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i antd-components-plus

Weekly Downloads

2

Version

1.2.1

License

MIT

Unpacked Size

168 kB

Total Files

15

Last publish

Collaborators

  • fancydigital