react，vue 页面添加水印

案例项目为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组件