Vue 添加當前系統時間和登入人水印,多個tab頁面、刪除、切換添加當前系統時間和登入人水印
阿新 • • 發佈:2020-08-19
先看效果
html 程式碼比較複雜,這裡只是截圖,上面效果是同一個頁面兩個地方增加水印,
js,在data中定義waterMarkDomFragment:null,waterMarkDomFragment2:null,mask_div_array:[],mask_div_array2:[],currentDbTab:null,
//最上面的水印 watermark:function(settings) { //預設設定 var defaultSettings = { watermark_txt: "text", watermark_x: 10, //水印起始位置x軸座標 watermark_y: 10, //水印起始位置Y軸座標 watermark_rows: 20, //水印行數 watermark_cols: 20, //水印列數 watermark_x_space: 100, //水印x軸間隔 watermark_y_space: 50, //水印y軸間隔 watermark_color: '#e4e4e4', //水印字型顏色 watermark_alpha: 0.4, //水印透明度 watermark_fontsize: '15px', //水印字型大小 watermark_font: '微軟雅黑', //水印字型 watermark_width: 210, //水印寬度 watermark_height: 80, //水印長度 watermark_angle: 20 //水印傾斜度數 }; if (arguments.length === 1 && typeof arguments[0] === "object") { var src = arguments[0] || {}; for (var key in src) { if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue; else if (src[key]) defaultSettings[key] = src[key]; } } var oTemp = document.createDocumentFragment(); var mask_div_array = []; //獲取頁面最大寬度 var page_width = Math.max(this.$el.scrollWidth, this.$el.clientWidth); var cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //獲取頁面最大高度 this.$el是當前Vue例項的頁面,也就是當前頁面 var page_height = Math.max(this.$el.scrollHeight, this.$el.clientHeight) + 450; // page_height = Math.max(page_height, window.innerHeight - 30); /*//獲取頁面最大寬度 var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth); var cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //獲取頁面最大高度 var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450; page_height = Math.max(page_height, window.innerHeight - 30);*/ //如果將水印列數設定為0,或水印列數設定過大,超過頁面最大寬度,則重新計算水印列數和水印x軸間隔 if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) { defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果將水印行數設定為0,或水印行數設定過大,超過頁面最大長度,則重新計算水印行數和水印y軸間隔 if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } var x; var y; for (var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.className = 'mask_div'; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //設定水印div傾斜顯示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; mask_div.style.lineHeight='25px'; //讓水印不遮擋頁面的點選事件 mask_div.style.pointerEvents = 'none'; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.fontFamily = defaultSettings.watermark_font; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; mask_div_array.push(mask_div); oTemp.appendChild(mask_div); }; }; this.waterMarkDomFragment = oTemp; this.mask_div_array = mask_div_array; // document.body.appendChild(oTemp); // var codemirror=settings.codemirror; // codemirror.forEach(function (dbTab,index) { // console.log('dbTab',settings.codemirror) // dbTab.appendChild(oTemp); // // // }) settings.codemirror.appendChild(oTemp); }, //最下面的水印 watermarkTable:function(settings) { //預設設定 var defaultSettings = { watermark_txt: "text", watermark_x: 10, //水印起始位置x軸座標 watermark_y: 10, //水印起始位置Y軸座標 watermark_rows: 20, //水印行數 watermark_cols: 20, //水印列數 watermark_x_space: 100, //水印x軸間隔 watermark_y_space: 50, //水印y軸間隔 watermark_color: '#e4e4e4', //水印字型顏色 watermark_alpha: 0.4, //水印透明度 watermark_fontsize: '15px', //水印字型大小 watermark_font: '微軟雅黑', //水印字型 watermark_width: 210, //水印寬度 watermark_height: 80, //水印長度 watermark_angle: 20 //水印傾斜度數 }; if (arguments.length === 1 && typeof arguments[0] === "object") { var src = arguments[0] || {}; for (var key in src) { if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key]) continue; else if (src[key]) defaultSettings[key] = src[key]; } } var oTemp = document.createDocumentFragment(); var mask_div_array = []; //獲取頁面最大寬度 var page_width = Math.max(this.$el.scrollWidth, this.$el.clientWidth); var cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //獲取頁面最大高度 var page_height = Math.max(this.$el.scrollHeight, this.$el.clientHeight) + 450; // page_height = Math.max(page_height, window.innerHeight - 30); /*//獲取頁面最大寬度 var page_width = Math.max(document.body.scrollWidth, document.body.clientWidth); var cutWidth = page_width * 0.0150; var page_width = page_width - cutWidth; //獲取頁面最大高度 var page_height = Math.max(document.body.scrollHeight, document.body.clientHeight) + 450; page_height = Math.max(page_height, window.innerHeight - 30);*/ //如果將水印列數設定為0,或水印列數設定過大,超過頁面最大寬度,則重新計算水印列數和水印x軸間隔 if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) { defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space)); defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1)); } //如果將水印行數設定為0,或水印行數設定過大,超過頁面最大長度,則重新計算水印行數和水印y軸間隔 if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) { defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space)); defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1)); } var x; var y; for (var i = 0; i < defaultSettings.watermark_rows; i++) { y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i; for (var j = 0; j < defaultSettings.watermark_cols; j++) { x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j; var mask_div = document.createElement('div'); mask_div.id = 'mask_div' + i + j; mask_div.className = 'mask_div'; mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt)); //設定水印div傾斜顯示 mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)"; mask_div.style.visibility = ""; mask_div.style.position = "absolute"; mask_div.style.left = x + 'px'; mask_div.style.top = y + 'px'; mask_div.style.overflow = "hidden"; mask_div.style.zIndex = "9999"; //讓水印不遮擋頁面的點選事件 mask_div.style.pointerEvents = 'none'; mask_div.style.opacity = defaultSettings.watermark_alpha; mask_div.style.fontSize = defaultSettings.watermark_fontsize; mask_div.style.fontFamily = defaultSettings.watermark_font; mask_div.style.color = defaultSettings.watermark_color; mask_div.style.textAlign = "center"; mask_div.style.width = defaultSettings.watermark_width + 'px'; mask_div.style.height = defaultSettings.watermark_height + 'px'; mask_div.style.display = "block"; mask_div_array.push(mask_div); oTemp.appendChild(mask_div); }; }; this.waterMarkDomFragment2 = oTemp; this.mask_div_array2 = mask_div_array; settings.table.appendChild(oTemp); }, //拼接當前系統時間,當前登入人內容--gUserId是系統登入人,根據需要寫 showWaterMark:function (options,tabIndex) { //如果原來有水印,刪除原有的水印 if(this.waterMarkDomFragment){ this.removeWaterMark(); } var now = this.getNow(); var waterMarkText = gUserId + "\n" + now; var defaultOptions = {"watermark_txt":waterMarkText,"watermark_x":70,"watermark_y":60,watermark_fontsize: '22px'}; var defaultOptions2 = {"watermark_txt":waterMarkText,"watermark_x":10,"watermark_y":80,watermark_fontsize: '22px'};//table // var defaultOptions = {"watermark_txt":"資料查詢IDE"+now,"watermark_x":70,"watermark_y":120}; var waterMarkOptions = _.extend({},defaultOptions); var waterMarkOptions2 = _.extend({},defaultOptions2);//table if(options){ waterMarkOptions = _.extend(waterMarkOptions,options); waterMarkOptions2 = _.extend(waterMarkOptions2,options);//table } var codemirror=''; var table=''; //tabActiveIndex 是當前啟用的tabindex codemirror=$('#codemirror'+this.tabActiveIndex).find('.CodeMirror-scroll')[0]; table=document.getElementById('table'+this.tabActiveIndex); this.watermark( _.extend({},waterMarkOptions,{codemirror:codemirror})); this.watermarkTable( _.extend({},waterMarkOptions2,{table:table})); }, removeWaterMark:function () { //刪除節點 var self = this; if(this.mask_div_array.length > 0){ this.mask_div_array.forEach(function (mask_div) { self.waterMarkDomFragment.appendChild(mask_div); }); this.mask_div_array = []; } if(this.mask_div_array2.length > 0){ this.mask_div_array2.forEach(function (mask_div2) { self.waterMarkDomFragment2.appendChild(mask_div2); }); this.mask_div_array2 = []; } }, handleShowOrRemoveWaterMark:function (currentDbTab,tabIndex) { var needWaterMark = false; var self=this; if(!currentDbTab){ self.tabData.forEach(function (tabItem) { if(tabItem.name == tabIndex){ needWaterMark = true; return true; }else{ needWaterMark = false; return true; } }); }else{ needWaterMark = currentDbTab.name==tabIndex?true:false; } self.renderWaterMark(needWaterMark); }, //渲染水印 renderWaterMark:function (needWaterMark){ if(this.waterMarkDomFragment){ this.removeWaterMark(); }if(needWaterMark){ this.showWaterMark(); } }, //切換每個tab的時候 tabClick:function(tab){ this.currentDbTab=tab; }, //刪除tab的時候 removeTab: function(name) { var _self = this; if(_self.waterMarkDomFragment){ _self.removeWaterMark(); }//刪除原有的水印 _.map(this.tabData, function(tab) { if (tab.name === name) { _self.tabActiveIndex=tab.name; _self.currentDbTab=tab; }); } watch:{ //我這裡是監聽啟用的Index,我這裡繫結的tab的標題,也當前啟用tab的標題 tabActiveIndex:{ handler:function (val) { var self = this; if(!self.currentDbTab){//新增,刪除 this.handleShowOrRemoveWaterMark(self.currentDbTab?self.currentDbTab:null,self.tabActiveIndex); }else{//切換 this.showWaterMark(); } }, deep:true }, }