Tag Archives: Ant Design

Ant Design proformdigit fieldprops limits the number of decimal places entered

Proformdigit uses min limit to input the minimum value, Max limit to input the maximum value, fieldprops limit to input the decimal places

Keep two decimal places fieldprops = {precision: 2}} 

<ProFormDigit 
	label="InputNumber" 
	name="num"
	min={1}
	max={22}
	fieldProps={{ precision: 2 }}
/>

fieldProps={{ precision: 0 }}

<ProFormDigit 
	label="InputNumber" 
	name="num"
	min={1}
	max={22}
	fieldProps={{ precision: 0 }}
/>

Using UMI plugin keep alive to realize keep alive state storage in UMI Ant Design

Using UMI plugin keep alive to store the keep alive state
1

$ npm install umi-plugin-keep-alive --save
//or
$ yarn add umi-plugin-keep-alive

2. Use

import { KeepAlive } from 'umi'
const contentList = () => {
	return (
		<>
			<KeepAlive 
				name="/About" //Can unload the <KeepAlive> node in the cached state by name
				saveScrollPosition="screen" //automatically saves the scroll position of the shared screen container
				when={true} > //true unloads when cached, false unloads when not cached
				<About/> //Component to save state for
			</KeepAlive>
		</>
	)
}

This function is based on react activation. For more details, please refer to react activation

Ant Design upload listtype = “picture card” realizes multi image upload and click preview image encapsulation

Users can upload pictures and display thumbnails in the list. When the number of photos uploaded reaches the limit, the upload button disappears. Click on the picture to open the picture preview box. Introduce the component where it is used, and the component will return the image array after transferring the image.

import React, {
    useState, useEffect } from 'react';
import {
    Upload, Modal } from 'antd';
import {
    PlusOutlined } fro

Solution to page scroll bar failure caused by opening secondary spring frame in Ant Design modal form

Ant Design modal form encountered the problem of page scroll bar failure after opening the secondary pop-up box and closing the two pop-up boxes.

Reason:
when the modal form pop-up box is opened, it will add style = "width: Calc (100% - 15px) to the body label; overflow: hidden;” inline style to hide the scroll bar of the page. When closed, this style will be cleared to restore the scroll bar. Open a secondary modal form pop-up box in the modal form pop-up box. After closing the two pop-up boxes, there will be a problem that the style on the body label is not cleaned up, resulting in the problem that the page scroll bar is not restored.

The solution is as follows:
after the first level cartridge modal form is closed, clean up the style added to the body. The specific code is as follows:

<ModalForm
     modalProps={{
         afterClose: () => {
             if (document.getElementsByTagName('body')[0].hasAttribute('style')) {
                 document.getElementsByTagName('body')[0].removeAttribute('style');
             }
         },
     }}>
</ModalForm>