背景：在后臺管理的項目中废离，會要求加上水印某筐，防止截圖盜取信息等弱睦，
1. 第一步：先創(chuàng)建水印的模塊組件
// 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;
}
創(chuàng)建一個svg的標(biāo)簽桩盲，里面畫上自己需要的水印內(nèi)容闰蚕，然后生成通過URL.createObjectURL生成一個url鏈接作為模塊的背景;通過 pointer-events: none;這個屬性可以將點擊事件透傳到下層喂链。
2. 使用水印組件作用于項目的app.tsx上
<React.StrictMode>
<App />
<WaterMaker text='水印哈哈哈' />
</React.StrictMode>
展示圖片.png
