目錄使用方法watermark.js圖片使用方法

1、在App.vue中引入并設置水印

2、本例子使用的水印圖片是250*250px的，可以根據需要自己調整樣式

3、watermark.js內容見下方

<script> import watermark from '@/commons/framework/watermark.js' export default { onLaunch: function() { watermark.set('/static/framework/imgs/watermark.png'); }, onShow: function() { console.log('App Show'); }, onHide: function() { console.log('App Hide') } } </script>watermark.js'use strict'; let watermark = {}; watermark.set = (path) => { let id = '1.23452384164.123412415'; // #ifdef H5 if (document.getElementById(id) !== null) { document.body.removeChild(document.getElementById(id)); } let div = document.createElement('div'); div.id = id; div.style.pointerEvents = 'none'; div.style.top = '44px'; div.style.left = '-40px'; div.style.bottom = '50px'; div.style.right = '0px'; div.style.position = 'fixed'; div.style.zIndex = '100000'; div.style.zoom = '0.6'; //設置縮放 div.style.opacity = '0.5'; //設置透明度 div.style.background = 'url(' + path + ') left top repeat'; document.body.appendChild(div); return id; // #endif // #ifdef APP-PLUS if (plus.nativeObj.View.getViewById(id) !== null) { plus.nativeObj.View.getViewById(id).close(); } uni.getSystemInfo({ success: function (res) { //水印排列行數 let row = Math.floor(res.windowHeight / uni.upx2px(250)); let tarArr = []; for(let i = 0; i < row; i++) { for(let j = 0; j < 3; j++){ tarArr.push({ tag: 'img', src: path, position: { top: (uni.upx2px(255) * i) + 'px', left: (uni.upx2px(255) * j) + 'px', width: uni.upx2px(255) + 'px', height: uni.upx2px(255) + 'px' } }); } } var watermarkView = new plus.nativeObj.View(id, { top:'70px', left:'0px', right: '0px', bottom: '50px' }, tarArr); //攔截View控件的觸屏事件,將事件穿透給下一層view watermarkView.interceptTouchEvent(false); watermarkView.show(); } }); // #endif } export default watermark;圖片

以上就是uni-app實現全局水印示例詳解的詳細內容，更多關于uni-app全局水印的資料請關注好吧啦網其它相關文章！