React，TS中一些常用且使用的小方法

判断 dom 元素是否在可视范围之内的 Hook

地址：ahooks.js.org/zh-CN/hooks…

import { useInViewport } from 'ahooks';

export default () => {
  const ref = useRef();
  const inViewPort = useInViewport(ref);
  return (
    <div>
      <div ref={ref}>observer dom</div>
      <div style={{ marginTop: 70, color: inViewPort ? '#87d068' : '#f50' }}>
        {inViewPort ? 'visible' : 'hidden'}
      </div>
    </div>
  );
};

** 前端 crypto-js aes 加解密 **

地址：www.jianshu.com/p/a47477e81…

    `尊敬的客户您好，您的报价单已生成，可以点击下面链接查看详细定价
        ${url}/seller/public#/workbench/quotation-h5-nst?decodeQuoteCode=${decodeQuoteCode}&userId=${Encrypt(
          userLoginId,
        )}`,

金额转换

     <div>
                  总价：
                  <span className={styles.currentPrice}>
                    ￥{numeral(store.form.totalActualPrice).format('0,0.00') || '-'}
                  </span>
                  <span className={styles.originPrice}>
                    ￥{numeral(store.form.totalOriginPrice).format('0,0.00') || '-'}
                  </span>
                </div>

百分比折扣，显示为中文

  0: '零',
  1: '一',
  2: '二',
  3: '三',
  4: '四',
  5: '五',
  6: '六',
  7: '七',
  8: '八',
  9: '九',
  '.': '点',
};

/** 百分比折扣，显示为中文 */
export const mapDiscount = (num: number) => {
  if (!num) return '';
  if (num === 100) return '十';
  const str = (num / 10).toString();
  const numArr = str.split('').map((s) => discountMap[s]);
  const result = numArr.join('');
  if (num > 10) {
    return result.replace('点', '');
  }
  return result;
};

成32位的随机id

export const uuid = () => {
  const reg = /-/g;
  const pwd = uuidv4().replace(reg, '');
  return pwd;
};

时间戳转换成日期

  if (!timeStamp) {
    return '';
  }
  return moment(timeStamp).format(fmt);
};

折行省略 display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; 未完持续更新