赞
踩
- 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);
- };
在项目入口文件引入 import './components/Watermark/index'
直接调用 waterMark() //全局加水印
注:本人前端小白 ,如有不对的地方还请多多指教
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。