React添加水印

转发自https://blog.csdn.net/czy19970301/article/details/116977039
utils/tools.ts

export const TpWatermark = (CON) => {
  const H = 150; //  水印行高
  const W = 200; // => 水印宽度
  const R = -16; //  => 旋转度数（可为负值）
  const C = '#d3cfcf'; // => 水印字体颜色
  const S = 20; //  => 水印字体的大小
  const O = 0.5; // => 水印透明度（0~1之间取值）

  // 判断水印是否存在，如果存在，那么不执行
  if (document.getElementById('tp-watermark') != null) {
    return;
  }
  const TpLine = parseInt(String((document.body.clientWidth - 200) / W)) * 2; // 一行显示几列
  let StrLine = '';
  for (let i = 0; i < TpLine; i++) {
    StrLine += `${CON}`;
  }
  const DivLine = document.createElement('div');
  DivLine.innerHTML = StrLine;

  const TpColumn = parseInt(String(document.body.clientHeight / H)) * 2; // 一列显示几行
  let StrColumn = '';
  for (let i = 0; i < TpColumn; i++) {
    StrColumn += `
${DivLine.innerHTML}
`;
  }
  const DivLayer = document.createElement('div');
  DivLayer.innerHTML = StrColumn;
  DivLayer.id = 'tp-watermark'; // 给水印盒子添加类名
  DivLayer.style.position = 'fixed';
  DivLayer.style.top = '0px'; // 整体水印距离顶部距离
  DivLayer.style.left = '-100px'; // 改变整体水印的left值
  DivLayer.style.zIndex = '99999'; // 水印页面层级
  DivLayer.style.pointerEvents = 'none';
  DivLayer.style.padding = '20px 100px';

  document.body.appendChild(DivLayer); // 到页面中
};

page/index.tsx

import { ConfigProvider } from 'antd';
import zhCN from 'antd/lib/locale/zh_CN';
import React, { useEffect, useState } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { TpWatermark } from '@/utils/tools';
import './index.less';

const IndexPage: React.FC = (props) => {
  const { children } = props;
  const dispatch = useDispatch();
  const { loginUserId } = useSelector((state: RootState) => {
    return {
      loginUserId: state.users.id,
    };
  });
 
  useEffect(() => {
    dispatch({
      type: 'users/getUsers',
    });
  }, []);

  useEffect(() => {
    if (loginUserId) TpWatermark(loginUserId);
  }, [loginUserId]);

  return (
    
        

          

              {children}
          
        
    
  );
};

export default IndexPage;