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

Judy ·

更新时间:2024-09-20

· 1153 次阅读

使用方法

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;

图片