微信小程序实现页面加水印的功能

{{text}} wxss:

.water-mark-mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
display: flex;
flex-direction: row;
justify-content: space-between;
pointer-events: none;
flex:1;
}

.row{
display: flex;
flex-direction: column;
align-items: center;
}
.col{
transform: rotate(-45deg);
height: 200rpx;
}
js:

Component({
data: {
text: ‘请勿外传’,
color: ‘rgba(0,0,0,0.1)’,
rows: [],
cols: []
},
// 组件在页面上挂载时触发,注意如果页面没卸载过，该事件就不会触发第二次
attached() {
const { windowWidth, windowHeight } = wx.getSystemInfoSync();
const rows = Math.ceil(windowWidth / (40 * this.data.text.length));
const cols = Math.ceil(windowHeight / 120);
const waterMark=wx.getStorageSync(‘waterMark’)
this.setData({
rows: new Array(rows),
cols: new Array(cols)
});
},
})
在需要的页面引入该组件即可。

作者：IU憨憨
链接：https://www.jianshu.com/p/3a05f292ae20
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。