后台管理系统加水印（react）

霸气小男

于 2024-04-19 15:58:03 发布

阅读量1.3k

点赞数 4

分类专栏： React JavaScript 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_63788547/article/details/137963167

版权

React 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

JavaScript

9 篇文章 0 订阅

订阅专栏

效果

代码图片

代码

window.waterMark = function (config) {
  var defaultConfig = {
    content: `我是水印`,
    fontSize: '16px',
    opacity: 0.3,
    rotate: '-15',
    color: '#ADADAD',
    modalId: 'J_waterMarkModalByXHMAndDHL',
  };
  config = Object.assign({}, defaultConfig, config);
  var existMarkModalDom = document.getElementById(config.modalId);
  if (existMarkModalDom) {
    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'] = '80%';
  markContentTxtDom.style['transform'] = 'translate(-50%, -50%) rotate(' + config.rotate + 'deg)';
  markContentTxtDom.style['font-size'] = config.fontSize;
  markContentTxtDom.style['color'] = config.color;
  markContentDom.appendChild(markContentTxtDom);
  var contentHtml = markContentDom.outerHTML;
  var allContentHtml = '';
  for (var i = 0; i < 100; i++) {
    allContentHtml += contentHtml;
  }
  markModalDom.innerHTML = allContentHtml;
  document.body.appendChild(markModalDom);
};