React
水印组件
https://procomponents.ant.design/components/water-mark
import { WaterMark } from '@ant-design/pro-components';
<WaterMark
rotate={-22}
content='示例水印'
fontColor='rgba(0,0,0,.15)'
fontSize={16}
zIndex={9}
>
<div>xxx</div>
</WaterMark>
page-container 的水印
打开下面的文章,搜索watermark
https://procomponents.ant.design/components/page-container
里面有句话
“配置水印,Layout 会透传给 PageContainer,但是以 PageContainer 的配置优先”
说明在Layout是可以设置的
怎么设置?
在app.tsx的layout配置中,添加或者修改waterMarkProps,如下所示
export const layout: RunTimeLayoutConfig = ({ initialState, setInitialState }) => {
return {
rightContentRender: () => <RightContent />,
disableContentMargin: false,
waterMarkProps: {
content: initialState?.currentUser?.userId + ' ' + initialState?.currentUser?.name,
},
...
}
}
配置参考
https://pro.ant.design/zh-CN/config/runtime-api#layout
https://procomponents.ant.design/components/layout