背景：在后台管理的项目中，会要求加上水印，防止截图盗取信息等，
1. 第一步：先创建水印的模块组件
// water-maker.tsx
import React ,{ memo, useMemo } from "react"
import styles from './index.less';
import { renderToString } from "react-dom/server";
const Index = (props: React.PropsWithChildren<{text:string ,fillColor?:string,fillOpacity?:number , fontSize?:number}>) => {
const svgUrl= useMemo(() => {
const svgRes = (<svg xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="300px" height="180px" viewBox="0 0 300 180">
<text x="-160" y="-30" fill={props.fillColor ||'#333'} transform="rotate(-35 220 -220)" fill-opacity={props.fillOpacity ||'0.1'}
font-size={`${props.fontSize||'28'}px`}> {props.text}</text>
</svg>)
return URL.createObjectURL(new Blob([renderToString(svgRes)], {
type:'image/svg+xml',
}))
}, [props]);
return (<div className={styles.waterMaker}
style={{ backgroundImage: `url(${svgUrl})` }}
>
{props.children}
</div>)
}
export default memo(Index)
// index.less
.waterMaker{
position: absolute;
width: 100%;
height: 100%;
pointer-events: none;
top: 0;
left: 0;
z-index: 999;
}
创建一个svg的标签，里面画上自己需要的水印内容，然后生成通过URL.createObjectURL生成一个url链接作为模块的背景;通过 pointer-events: none;这个属性可以将点击事件透传到下层。
2. 使用水印组件作用于项目的app.tsx上
<React.StrictMode>
<App />
<WaterMaker text='水印哈哈哈' />
</React.StrictMode>
展示图片.png
