易忘使用tip

2024-07-24  本文已影响0人  krystal_H
  1. form表单中使用问号提示:
{
   type: 'custom',
   vmodel: 'skuSource',
   skipLog: true,
   label: 'SKU来源',
   formItemLabelTips: <><div>sku随便写点字</div><div>指定SK</div></>,
   formItemLabelTipsProps: {
      children: <QuestionCircleOutlined className="m-x-5" />,
   },
 }
  1. table表头标题使用提示
{
     align: 'center',
     dataIndex: 'minStoreProductNumber',
     title: (
           <>
               <Tooltip
                   title={
                        <div>
                           <div>随便写两行</div>
                           <div>aaaa</div>
                        </div>
                    }
               >
                   <span className="m-r-5">最低在线数</span>
                   <QuestionCircleOutlined />
              </Tooltip>
           </>
    )
}
  1. modal中确定按钮在loading,禁止取消按钮
cancelButtonProps={{disabled: state.loading}}
  1. 大文本省略,悬浮显示
<OperationContent rows={2}>{item.dynamicInventoryRemark}</OperationContent>
import {Typography} from 'antd';
import React, {FC} from 'react';

import styles from './index.less';

/** 大文本省略,悬浮提示 */
const OperationContent: FC<IOperationContentProps> = ({
    children,
    rows = 11,
}) => {

    return (
        <Typography.Paragraph
            className={styles['operation-content']}
            ellipsis={{
                rows,
                tooltip: {
                    arrow: false,
                    children,
                    overlayClassName: styles['operation-content-tips'],
                    overlayInnerStyle: {whiteSpace: 'pre-wrap'},
                    placement: 'right',
                },
            }}
        >
            {children}
        </Typography.Paragraph>
    );
};

export {OperationContent};

interface IOperationContentProps {
    children: React.ReactNode;
    rows?: number;
}

上一篇下一篇

猜你喜欢

热点阅读