uni-app實現(xiàn)全局水印示例詳解

更新時間：2023年07月10日 11:46:49 作者：小李不小

這篇文章主要為大家介紹了uni-app實現(xiàn)全局水印示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

使用方法

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

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

3、watermark.js內(nèi)容見下方

<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) {  
            //水印排列行數(shù)  
            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;