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