美文网首页
易忘使用tip

易忘使用tip

作者: krystal_H | 来源:发表于2024-07-24 17:49 被阅读0次
    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;
    }
    
    

    相关文章

      网友评论

          本文标题:易忘使用tip

          本文链接:https://www.haomeiwen.com/subject/qyhphjtx.html