Uniapp applet implements page watermark effect

In the past two days, a certain page of the company's mini program needs to implement a watermark effect to prevent users from taking screenshots and reusing them... Let's take a look at the effect I achieved...

At first, I found two cases on the Internet, and then implemented it according to their method. The displayed effect could not cover the entire screen. There was a certain blank distance between the watermark and both sides of the screen, so in the end I had to write it by hand. Got a...

Just go to the code...

<!-- 水印效果 -->
<view class="watermark-box" v-if="type == 1">
	<view class="watermark-area">
		<view class="watermark-item" v-for="item in 12" :key="item">
			<view class="watermark-text" v-for="item in finallyCols" :key="item">
				{
   
   {curText}}
			</view>
		</view>
	</view>
</view>

.watermark-box {
	position: absolute;
	left: 0;
	top: -46%;
	width: 150%;
	height: 110%;
	z-index: 9999;
	opacity: 0.2;
	overflow: hidden;

	.watermark-area {
		width: 100%;
		height: 100%;
		transform: rotate(-15deg);

		.watermark-text {
			display: inline-block;
			padding: vmin(40);
			color: gray;
		}
	}
}

So far, the requirements have been basically realized, but there is still a problem. If the number of each line is hard-coded, if the screen is too small, the line content will wrap. If the screen is too large, the right side of the screen will be wider. spacing, and then I made a simple adaptation. There should be no problems with the basic models (you need to deal with it yourself according to the actual situation). Let’s take a look at the code...

const {
	windowWidth,
	windowHeight
} = uni.getSystemInfoSync();
if(windowWidth >= 736) {
	this.finallyCols = 4
} else {
    this.finallyCols = 3
}

Friends who feel it is helpful to you can leave a star...