uni-app小程序添加水印,view页面动态添加水印，铺满全屏

uni-app小程序,view页面动态添加水印，铺满全屏

使用uni小程序开发，给页面添加水印的需求，屏幕大小不同，因此需要动态计算高度和宽度，来计算需要多少个水印

view内容

<template>
	 <view class="watermark-container" v-if="text">
	    <view class="zhanshiyemian">
	      <view 
	        class="weikaifang-sty" 
	        v-for="(item, index) in generateWatermarks()" 
	        :key="index"
	      >
	        {{ text }}
	      </view>
	    </view>
	  </view>
</template>

js部分
要判断页面大小并添加遍历的数以铺满全屏，可以使用以下方法：

1：获取页面的宽度和高度。
2：计算需要多少个水印元素来铺满全屏。
3：修改Array(30).fill(null)中的数值为计算出的水印元素数量。

export default {
		name:"Watermark",
		data() {
			return {
				itemCount: 0,
			};
		},
		props: {
		    text: {
		      type: String,
		      default: '水印'
		    },
		},
		mounted() {
			this.calculateWatermarkCount();
		},
		beforeDestroy() {
		},
		methods: {
		   calculateWatermarkCount() {
		      const screenWidth = uni.getSystemInfoSync().windowWidth;
		      const screenHeight = uni.getSystemInfoSync().windowHeight;
		      const watermarkWidth = 25;
		      const watermarkHeight = 100;
		      const horizontalCount = Math.ceil(screenWidth / watermarkWidth);
		      const verticalCount = Math.ceil(screenHeight / watermarkHeight);
		      this.itemCount = horizontalCount * verticalCount;
		               
		    },
			
		    generateWatermarks() {
		        return Array(this.itemCount).fill(null);
		    },
		},
	}

css部分

.from-stye{
		position: relative;
	    z-index: 9999;
		pointer-events: none;
	}
	.zhanshiyemian{
		position: absolute;
		width: 100%;
		z-index: 9999;
		pointer-events: none;
		display: flex;
		flex-wrap: wrap;
		line-height: 100rpx;
	}
	.weikaifang-sty{
		font-size: 12px;
		color: #cccccc63;
		width: 25%;
		text-align: center;
	}