效果

代码图片

代码

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);
};

使用方法

• components文件夹下创建Watermark文件夹
• Watermark文件夹下创建index.js文件
• 将以上代码粘贴进去

• 在项目入口文件引入   import './components/Watermark/index'

• 直接调用   waterMark() //全局加水印

操作完看看效果吧！！！

注：本人前端小白 ，如有不对的地方还请多多指教