Ant Design 开发页面 ant design tooltip

1.利用moment时间转换 常用

转换为普通时间格式
moment("时间").format('yyyy-MM-DD’)
 moment("时间").format('yyyy-MM-DD hh:mm:ss’)   //表示12小时制
 moment("时间").format('yyyy-MM-DD HH:mm:ss’)   //表示24小时制
MM: 月份 mm: 分 
DD: 日期 dd: 星期 
hh: 12进制的小时 
HH: 24进制的小时 
SSS: 毫秒 
ss: 秒

获取时间戳（秒）
moment().format('X') // 返回值为字符串类型
moment().unix() // 返回值为数值型

获取时间戳（毫秒）
+moment();
moment().format('x') // 返回值为字符串类型
moment().valueOf() // 返回值为数值型

计算时间差
var a = moment([2007, 0, 29]);
var b = moment([2007, 0, 28]);
a.diff(b) // 86400000
a.diff(b, 'days') // 1
支持的测量是 years、months、weeks、days、hours、minutes 和 seconds

时间比较
moment().isBefore();
moment().isAfter();
moment('2010-10-20').isBefore('2010-12-31', 'year’);

时间是否合法 检查Moment是否被视为无效的日期的
moment("not a real date").isValid(); // false

2.禁用 Antd的日期选择器的某段时间：

disabledDate属性设置为
   const disabledDate = (current)=>{
      return current && current<=moment().subtract(1,"days").endOf("day")    
   }
 注意此处， currt打印是一个带有时分秒的时间，
 此时如果外部时间比如  moment（'2023-08-20'）格式的时间代入比较，
 有时会因精确度问题产生比较差异，禁用结果会有一天的日期偏差。

正确写法：

利用isBfore isAfter等，

同时可加入第二个参数 精确度比较

current.isBefore('2023-08-03','day')      禁用xx此日期之前的日期
current.isAfter(moment().add(1,'years'),'day')     禁用一年后的今天以后后的日期

3.项目中一些经过加/解密、local存值转换等 操作后的日期，

比如出生日期、证件日期等；转化过程中可能会转化出 INVALID DATE 、‘undefined’、‘null’

等一系列value值，如图：

此时便不能单纯仅仅以 if || ?? 等方式处理，
此时可以用到moment(“not a real date”).isValid();

//时间是否合法 检查Moment是否被视为无效的日期的
moment("not a real date").isValid();

3.Tooltip组件设置提示框宽度：

overlayStyle = {{maxWidth:350}}

4.解决Antd组件弹出层随页面滚动分离的问题：

getPopupContainer={triggerNode => triggerNode.parentNode}

5.Antd组件样式的修改：

a.常用组件
使用global设置样式

.divA{
    :global{
        .ant-tabs-nav{
            height:30px;
            width:200px;
        }
    }
}

b.相对于某个dom节点的元素 设置了绝对定位的组件；
使用overlayClassName
例如：Tooltip、Popconfirm、Popover

<Popover content="11111" trigger="click" overlayClassName="popStyle">
   测试Popover组件样式问题
</Popover>
:golbal{
    .popStyle .ant-popover-inner-content {
                border:1px solid red;
  }

6.react开发过程中的 取消默认事件 取消冒泡

取消冒泡    注意 实际开发中需要以上俩个都写；
  e.stopPropagation()    //阻止合成事件之间的冒泡 
  e.nativeEvent.stopImmediatePropagation() 
                          //阻止document上同类事件的调用

  
  阻止默认事件   e.preventDefault();
  合成事件中异步访问处理方式   e.persist()

7.常用对的导出excel文件流统一处理函数

const PrintFile = (value, title, index = 0) => {
  const blob = new Blob([value]);
  const blobUrl = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.style.display = 'none';
  a.download = title; // 自定义下载的文件名
  a.href = blobUrl;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

例： 导出接口请求

const getDownFile = async () => {
    const res = await axios({
      method: 'post',
      url: '/aaaa',
      data,
      responseType: 'blob'
    });
    const fileReader = new FileReader();
    fileReader.onload = ()=>{
      PrintFile(res.data, '11111报表.xlsx');
    }
    fileReader.readAsText(res.data);
  };

8.react项目中 0 与其他假值（‘’、null、false 等）不同，
数字 0 在 JSX 中是一个有效值。
在做条件渲染的时候 注意：

1    <div>
        {array.length && <div>xxxxx</div>}
     </div> 
     等价于：
     <div>
        {0}
     </div>
     
 正确写法：
    <div>
     {array.length > 0 && <div>xxxxxxxxx</div>}
    </div>
 或者用三目
    <div>
       {items.lengt ? <div> xxxxxxxxxxx</div>
        : null}
    </div>