案例项目为react 移动端,基于umi 搭建的框架
思路谁有页面统一加水印,这是就需要我们再跟目录下加上,umi 自带layout,所以相对简单一点。封好组件方法引入尽可以
在layouts 下添加waterMark.js
/**
*** config 配置 全部非必填 ***
{
content: 'ChiefClouds XHM', // 文本内容
fontSize: '16px', // 字体大小
opacity: 0.5, // 透明度
rotate: '-10', // 偏转角度
color: '#ADADAD', // 字体颜色
modalId: 'J_waterMarkModalByXHMAndDHL' // 浮层DomId
}
*** 使用方式 ***
页面引入 waterMark.js 文件
执行 waterMark(特定配置参数) 方法
每次调用会生成新的 DOM 实例, 支持传入新配置, 动态创建新实例
*/
export const waterMark = (config) =>{
var defaultConfig = {
content: sessionStorage.getItem('gid'), // 通常为公司名字或个人用户名
fontSize: '16px',
opacity: 0.5,
rotate: '-10',
color: '#ADADAD',
modalId: 'J_waterMarkModalByXHMAndDHL',
}
config = Object.assign({}, defaultConfig, config)
var existMarkModalDom = document.getElementById(config.modalId)
if (existMarkModalDom) {
// return;
document.body.removeChild(existMarkModalDom)
}
var markModalDom = document.createElement('div')
markModalDom.setAttribute('id', config.modalId)
markModalDom.style['position'] = 'fixed'
markModalDom.style['top'] = 0
markModalDom.style['left'] = 0
markModalDom.style['bottom'] = 0
markModalDom.style['right'] = 0
markModalDom.style['background-color'] = 'transparent'
markModalDom.style['pointer-events'] = 'none'
markModalDom.style['z-index'] = 9999
markModalDom.style['overflow'] = 'hidden'
var markContentDom = document.createElement('span')
markContentDom.style['position'] = 'relative'
markContentDom.style['display'] = 'inline-block'
markContentDom.style['max-width'] = '33%'
markContentDom.style['min-width'] = '400px'
markContentDom.style['padding'] = '80px 0'
markContentDom.style['height'] = '100px'
markContentDom.style['text-align'] = 'center'
markContentDom.style['opacity'] = config.opacity
markContentDom.style['pointer-events'] = 'none'
var markContentTxtDom = document.createElement('span')
markContentTxtDom.innerHTML = config.content
markContentTxtDom.style['position'] = 'absolute'
markContentTxtDom.style['display'] = 'inline-block'
markContentTxtDom.style['pointer-events'] = 'none'
markContentTxtDom.style['top'] = '50%'
markContentTxtDom.style['left'] = '50%'
markContentTxtDom.style['transform'] =
'translate(-50%, -50%) rotate(' + config.rotate + 'deg)'
markContentTxtDom.style['font-size'] = config.fontSize
markContentTxtDom.style['color'] = config.color
markContentDom.appendChild(markContentTxtDom)
// return
var contentHtml = markContentDom.outerHTML
var allContentHtml = ''
for (var i = 0; i < 100; i++) {
allContentHtml += contentHtml
}
markModalDom.innerHTML = allContentHtml
document.body.appendChild(markModalDom)
}
使用
import { waterMark } from './waterMark';
export default function Layout(props: IRouteComponentProps) {
useEffect(() => {
// 调用
waterMark();
}, []); //改生命周期如vue 的mounted
return (
.
.
.
此处省略一千行....
);
}
vue 可在main.js 使用
不想自己分装也可使用watermark-dom、watermark-component-for-react组件