目录
- 使用方法
- 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全局水印的资料请关注悠久资源网其它相关文章！
您可能感兴趣的文章:
- uniapp界面新增水印实现示例详解
