uniapp加水印

<watermark text="仅供演示，不为真实" color="rgba(0, 0, 0, 0.15)" :fontSize="24" :rotateAngle="-45" :gapX="170" :gapY="200">

</watermark>

export default 下加：

components: {

watermark

},

import watermark from '@/components/watermark.vue'

watermark.vue文件在components里

<template>
	    <view class="watermark-container">
		        <!-- 水印层 -->
		        <view class="watermark-layer">
			            <view class="watermark-grid">
				                <view class="watermark-item" v-for="(item, index) in watermarkList" :key="index"
					 :style="{
                          left: item.left + 'px',
                          top: item.top + 'px'
                      }">
					                    <text class="watermark-text" :style="{                         color: color,    
						                    fontSize: fontSize + 'px' ,                         transform:
						`rotate(${rotateAngle}deg)`                     }">{{ text }}</text>
					                </view>
				            </view>
			        </view>

		        <!-- 内容层 -->
		        <view class="watermark-content">
			            <slot></slot>
			        </view>
		    </view>
</template>

<script>
	export default {
		name: "watermark",
		props: {
			// 水印文字内容
			text: {
				type: String,
				default: '内部资料'
			},
			// 水印文字颜色
			color: {
				type: String,
				default: 'rgba(0, 0, 0, 0.1)'
			},
			// 水印文字大小
			fontSize: {
				type: Number,
				default: 16
			},
			// 水印旋转角度
			rotateAngle: {
				type: Number,
				default: -30
			},
			// 水印水平间距 (密度)
			gapX: {
				type: Number,
				default: 200
			},
			// 水印垂直间距 (密度)
			gapY: {
				type: Number,
				default: 200
			}
		},
		data() {
			return {
				watermarkList: []
			};
		},
		mounted() {
			this.generateWatermark();
		},
		methods: {
			generateWatermark() {
				// 计算需要多少个水印来覆盖屏幕
				const systemInfo = uni.getSystemInfoSync();
				const screenWidth = systemInfo.windowWidth || systemInfo.screenWidth;
				const screenHeight = systemInfo.windowHeight || systemInfo.screenHeight;

				const cols = Math.ceil(screenWidth / this.gapX) + 2; // 多加几列确保覆盖
				const rows = Math.ceil(screenHeight / this.gapY) + 2; // 多加几行确保覆盖

				const watermarkList = [];
				for (let i = 0; i < cols; i++) {
					for (let j = 0; j < rows; j++) {
						watermarkList.push({
							left: i * this.gapX,
							top: j * this.gapY
						});
					}
				}

				this.watermarkList = watermarkList;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.watermark-container {
	position:
	relative;
	width: 100%;
	min-height: 100vh;
	overflow:
	hidden;
	}
	.watermark-layer {
	position:
	fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	pointer-events:
	none;
	overflow:
	hidden;
	}
	.watermark-grid {
	width: 100%;
	height: 100%;
	}
	.watermark-item {
	position:
	absolute;
	display:
	flex;
	justify-content:
	center;
	align-items:
	center;
	}
	.watermark-text {
	white-space:
	nowrap;
	user-select:
	none;
	display:
	block;
	}
	.watermark-content {
	position:
	relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color:
	transparent;
	}
</style>