react, add watermark to vue page

The case project is react mobile terminal, a framework based on umi

The idea is that anyone who has a unified watermark on the page needs to be added to the directory. umi comes with its own layout, so it is relatively simple. Seal the component method and introduce it as much as possible

Add waterMark.js under layouts

/**
*** 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)
}

use

import { waterMark } from './waterMark';

export default function Layout(props: IRouteComponentProps) {

  useEffect(() => {
    // 调用
    waterMark();
  }, []); //改生命周期如vue 的mounted
  return (    
   .
   .
   .
    此处省略一千行....
  );
}

vue can be used in main.js

You can also use watermark-dom and watermark-component-for-react components if you don’t want to repackage yourself

react, add watermark to vue page

Guess you like