antd-react 组件库工作以来的总结
- 我的博客
- http://wangxince.site/my-demo-markdown/
准备阶段
bug
# form
当与modal结合的时候 initValus数据会异步
需要使用form.setValues 设置数据
具体见 http://wangxince.site/my-demo-markdown/debug
组件
通用
button
<Button
# 基础属性
type={
'default |primary | dashed | text | link'}
shape={
'default|circle|round'}
size={
'large|middle|small'}
ghost 按钮背景透明
danger 红色外观
disabled 禁用效果
block 宽度为父宽度
icon={
<xxx/>}
# 其他属性
loading={
boolean}
/>
# 组合按钮
<Dropdown.Button overlay={
组件名} />
# bug 移除按钮文件之间的空格
import {
Button, ConfigProvider } from 'antd';
<ConfigProvider autoInsertSpaceInButton = {
false }>
<Button type="primary">
空格
</Button>
</ConfigProvider>
icon
# 默认图标
import {
xxx } from '@ant-design/icons';
# 自定义图标
import Icon from '@ant-design/icons';
<Icon component={
xxx} />
# 使用 iconfont
import {
createFromIconfontCN } from '@ant-design/icons';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',
});
<IconFont type="icon-tuichu" />
# 三类图标名字区别
xxxOutlined
Fuiled
TwoTone
# spin 旋转动画
# rotate={
180} 旋转角度
# twoToneColor="#eb2f96" 双色图标设置颜色
排版
布局
分割线
<Divider >
dashed
plain
orientation={
'left|right'}
type={
'horizontal|vertical'}
/>
Grid
# row
<Row
gutter={
16}
gutter={
{
xs: 8, sm: 16, md: 24, lg: 32 }}
gutter={
[16, 24]} 水平间距 垂直间距
justify='start|center|spacce-between....'
align='top|middle|bottom'
wrap={
false}
/>
# col
<Col
span={
6}
offset={
6}
pull={
18}
push={
2}
/>
<Row>
# 手动指定栅格宽度
默认一格为 8.33333%
style="width: 12.499999995%;
flex: 0 0 12.499%;max-width: 12.499%;">
Layout
import {
Layout } from 'antd';
const {
Header, Footer, Sider, Content } = Layout;
<Layout>
<Header>Header</Header>
<Content>Content</Content>
<Footer>Footer</Footer>
<Layout>
<Sider>Sider</Sider>
<Content>Content</Content>
</Layout>
</Layout>
Space
<Space
size='small|middle|large|number'
size={
[8,16]}
align='start|end|center|baseline'
direction="vertical|horizontal"
wrap
split={
<Divider type="vertical" />}
/>
导航
Affix 固钉
<Affix
offsetTop={
10}
offsetBottom={
10}
target={
()=>dom}
onChange
/>
Breadcrumb
<Breadcrumb
separator=">"
>
<Breadcrumb.Item>
<a href="">Application Center</a>
</Breadcrumb.Item>
<Breadcrumb.Separator>:</Breadcrumb.Separator>
</Breadcrumb>
Dropdown
<Dropdown
overlay={
封装的Menu组件 }
arrow
placement="bottomLeft"
trigger={
['click'|'hover|contextMenu']}
>
<Button>这是按钮</Button>
</Dropdown>
Menu
<Menu
mode='horizontal|vertical|inline'
theme="dark|light"
inlineCollapsed={
true | false}
inlineIndent={
number} 缩进的宽度
defaultSelectedKeys={
['MenuItemKeys']}
defaultOpenKeys={
['SubMenuKeys']}
openKeys={
['SubMenuKeys']}
onOpenChange={
(openKeys)=>string[]}
>
<SubMenu
key='SubMenu'
icon
title
>
<ItemGroup
key=''
title=''
>
<MenuItem
key=''
icon
>
这是子菜单
</MenuItem>
</ItemGroup>
</SubMenu>
</Menu>
PageHeader
Pagination
# 逻辑
当前页面 一页放几条数据 总共多少数据 当前页码
pageSize total current
当点击的时候 将点击的页码切换
通过当前页面 发起网络请求 覆盖数据
#
<Pagination
pageSize={
每页条数}
total={
数据总数}
current={
当前页数}
pageSizeOptions=[]
onChange={
(page,pageSize)=> }
showTotal: (total) => `共 ${
total} 条数据`,
defaultPageSize
defaultCurrent
/>
# 页码重置问题
https://stackoverflow.com/questions/69638994/how-to-reset-the-paginations-current-page-when-pagesize-changes-in-ant-design
Steps
<Steps
current={
1}
size='small'
>
<Step
title
subTitle
description
status="finish|process|wait"
icon
>
</Step>
</Steps>
数据录入
AutoComplete
#
<AutoComplete
placeholder
style
options
value
onSelect
onSearch
onChange
showSearch={
{
filter }}
/>
filter(inputValue, path) {
return path.some(option => option.name.indexOf(inputValue) > -1);
},
DatePicker
import moment from 'moment'
import {
DatePicker } from 'antd';
const {
RangePicker } = DatePicker;
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
<RangePicker
## 基础配置
disabled={
[false,true]}
renderExtraFooter={
() => 'extra footer'}
bordered={
false}
size={
'large|miaddle|small'}
locale={
locale}
## 具体时间配置
value={
""}
picker="year|quarter|month|week|date|time"
showTime={
{
format: "hh[时]mm[分]ss[秒]",
defaultValue:[
moment('01:00:00', 'HH:mm:ss'),
moment('11:59:59', 'HH:mm:ss')
]
}}
搭配 showTime 使用
defaultPickerValue={
moment("2021-05-01")}
format="YYYY/MM/DD HH:mm:ss"
ranges={
{
Today: [moment(), moment()],
'当月':[
moment().startOf('month'),
moment().endOf('month')
]
}}
dateRender={
current => {
const style = {
};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
<div className="ant-picker-cell-inner" style={
style}>
{
current.date()}
</div>
)
}}
disabledDate={
disabledDate}
## 事件
onChange={
(date:moment,dateString:string)=>}
onCalendarChange={
val => setDates((val))}
/>
禁用年月日时分秒
## 禁用 年月日 时分秒 => 限制时间选择范围、
<RangePicker
defaultPickerValue={
moment("2021-05-01")}
showTime={
{
format: "hh时mm分ss秒"}}
disabledDate={
disabledDate}
disabledTime={
disabledTime}
/>
const disabledDate = (currentDate) => {
const start = moment("2021-05-01")
const end = moment("2021-06-01")
return currentDate && currentDate < start
|| currentDate > end
return currentDate && !(currentDate < start
|| currentDate > end)
return current && current < moment().subtract(8, 'day');
}
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
}return result;}
const disabledTime = () => {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
}
}
禁用7天范围
# 禁用7天范围
<RangePicker
defaultPickerValue={
moment("2021-05-01")}
showTime={
{
format: "hh时mm分ss秒"}}
disabledDate={
disabledDate}
onCalendarChange={
val => setDates((val))}
/>
const [dates, setDates] = useState([]);
const disabledDate = (current) => {
if (!dates || dates.length === 0) {
return false;}
const tooLate = dates[0] && current.diff(dates[0],'days') > 7;
const tooEarly=dates[1] && dates[1].diff(current, 'days') > 7;
return tooEarly || tooLate;
if (!dates || dates.length === 0) {
return false;}
const start = moment("2021-05-01")
const end = moment("2021-06-01")
const tooLate=dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly=dates[1]&&(dates[1]).diff(current, 'days') > 7;
return current && (tooEarly || tooLate)
|| current < start || current > end
};
禁用年份
- 需要升级最新版
- “ant-design-vue”: “^1.7.8”,
<DatePicker format="YYYY" disabledDate={
disabledYear} />
function disabledYear(current) {
return current.year() === 2021;
}
demo
import {
useState } from 'react'
import {
DatePicker } from 'antd';
import 'moment/locale/zh-cn';
import locale from 'antd/es/date-picker/locale/zh_CN';
import moment from 'moment'
const {
RangePicker } = DatePicker;
const Test = () => {
const [dates, setDates] = useState([]);
const disabledDate = (current) => {
if (!dates || dates.length === 0) {
return false; }
const start = moment("2021-05-01")
const end = moment("2021-06-01")
const tooLate = dates[0] && current.diff(dates[0], 'days') > 7;
const tooEarly = dates[1] && (dates[1]).diff(current, 'days') > 7;
return current && (tooEarly || tooLate)
|| current < start || current > end
};
function range(start, end) {
const result = [];
for (let i = start; i < end; i++) {
result.push(i);
} return result;
}
const disabledTime = () => {
return {
disabledHours: () => range(0, 24).splice(4, 20),
disabledMinutes: () => range(30, 60),
disabledSeconds: () => [55, 56],
}
}
return (
<>
<RangePicker
renderExtraFooter={
() => '这是页脚'}
bordered={
false}
size={
'large'}
locale={
locale}
showTime={
{
format: "hh时mm分ss秒",
defaultValue: [
moment('01:00:00', 'HH:mm:ss'),
moment('11:59:59', 'HH:mm:ss')
]
}}
defaultPickerValue={
moment("2021-05-01")}
format="YYYY/MM/DD HH:mm:ss"
ranges={
{
Today: [moment(), moment()],
'当月': [
moment().startOf('month'),
moment().endOf('month')
]
}}
dateRender={
current => {
const style = {
};
if (current.date() === 1) {
style.border = '1px solid #1890ff';
style.borderRadius = '50%';
}
return (
<div className="ant-picker-cell-inner" style={
style}>
{
current.date()}
</div>
)
}}
disabledDate={
disabledDate}
onCalendarChange={
val => setDates((val))}
onChange={
(date, dateString) => console.log(date, dateString)}
/>
</>
)
}
export default Test
选中多个日期
#
import React, {
useState } from "react";
import {
DatePicker, Button } from "antd";
import moment from "moment";
import styles from './index.less';
const MultipleDatePicker = () => {
const [selectedDate, setSelectedDate] = useState([])
const onValueChange = (date) => {
const newDate = moment(date).startOf("day").valueOf()
if (selectedDate.includes(newDate)) {
setSelectedDate([...selectedDate.filter(item => item !== newDate)])
} else {
setSelectedDate([...selectedDate, newDate])
}
};
const dateRender = (currentDate) => {
const isSelected = selectedDate.includes(moment(currentDate).startOf("day").valueOf())
let selectStyle = isSelected ?
{
position: 'relative',
zIndex: 2,
display: 'inlineBlock',
width: "24px",
height: "22px",
lineHeight: "22px",
backgroundColor: "#1890ff",
color: "#fff",
margin: "auto",
borderRadius: "2px",
transition: "background 0.3s, border 0.3s"
}
: {
}
return (<div style={
selectStyle} > {
currentDate.date()} </div >)
}
return (
<>
<div className={
styles.multipleDatePicker}>
<DatePicker
open
dateRender={
dateRender
这篇博客总结了作者在使用antd-react组件库时的经验，涵盖了从准备阶段到组件的详细使用，包括通用组件如Button和Icon，布局组件如Grid和Layout，数据录入组件如Form和DatePicker，数据展示组件如Table和Avatar，以及反馈和其它组件等。内容丰富，包含各种组件的使用场景和注意事项。
最低0.47元/天 解锁文章
扫一扫
4025
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
