```
import React, { useEffect, useRef } from 'react'
import SvgMark from './svg';
const WaterMark: React.FC<{
fillOpacity?: string;
text?: string;
fontSize?: number;
fillColor?: string;
id: string;
}> = (props) => {
const { fillColor = '#e0e0e0', fillOpacity = '0.5', fontSize = 20, text = '', id = 'marked' } = props;
const elementID = `waterMark-${id}`;
const waterRef = useRef(null);
const mark = SvgMark({ fillColor, fillOpacity, fontSize, text });
const blob = new Blob([mark], {
type: 'image/svg+xml',
});
const url = URL.createObjectURL(blob);
const { MutationObserver } = window;
const getElement = (id: string) => document.getElementById(id);
const setWaterMark = () => {
const watermarkDiv = document.createElement('div');
const styleStr = `
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:${1002};
pointer-events:none;
background-repeat:repeat;
background-image:url('${url}')`;
watermarkDiv.setAttribute('style', styleStr);
watermarkDiv.setAttribute('id', elementID); // 在元素中添加类名，可以加载CSS样式
const container = getElement(id);
if (container) {
container.insertBefore(watermarkDiv, container.firstChild);
}
};
useEffect(() => {
setWaterMark();
const observer = new MutationObserver(() => {
if (!getElement(elementID)) {
setWaterMark();
}
});
if (getElement(elementID)) {
observer.observe(document.body, {
attributes: true,
characterData: true,
childList: true,
subtree: true,
attributeOldValue: true,
characterDataOldValue: true,
});
}
}, [waterRef, elementID]);
return
;};
export default WaterMark;
```
