uni-app实现全局水印示例详解

目录使用方法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全局水印的资料请关注好吧啦网其它相关文章！