易忘使用tip

作者: krystal_H | 来源:发表于2024-07-24 17:49 被阅读0次

设置UITextField占位符placeholder颜色
夫天运
Git使用Tip
Ubuntu使用Tip
Tip | OkHttp使用
learn-react之基础
关于忘记和记起
Visual Studio Code 插件
thinkcmf5 导入excel
java8_CompletableFuture

form表单中使用问号提示：

{
   type: 'custom',
   vmodel: 'skuSource',
   skipLog: true,
   label: 'SKU来源',
   formItemLabelTips: <><div>sku随便写点字</div><div>指定SK</div></>,
   formItemLabelTipsProps: {
      children: <QuestionCircleOutlined className="m-x-5" />,
   },
 }

table表头标题使用提示

{
     align: 'center',
     dataIndex: 'minStoreProductNumber',
     title: (
           <>
               <Tooltip
                   title={
                        <div>
                           <div>随便写两行</div>
                           <div>aaaa</div>
                        </div>
                    }
               >
                   <span className="m-r-5">最低在线数</span>
                   <QuestionCircleOutlined />
              </Tooltip>
           </>
    )
}

modal中确定按钮在loading，禁止取消按钮

cancelButtonProps={{disabled: state.loading}}

大文本省略，悬浮显示

<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;
}