uniapp vue 添加水印

1. 在默认文件先新建components文件夹
2. 创建vue 文件 ‘wm-watermark.vue’

<template>
	<!-- 水印 -->
	<view class="watermark">
		<block v-for="(item,index) in num" :key="index">
			<view class="watermark-text" v-if="text != ''" :style="{opacity:opacity}">{{text}}</view>
			<image class="watermark-img" :src="imgUrl" mode="aspectFill" v-if="imgUrl !='' && text ==''" :style="{opacity:opacity}"></image>
		</block>
	</view>
</template>

<script>
	export default {
		name:'wm-watermark',
		props:{
			text:{			//设置水印文字
				type:String,
				default:''
			},
			imgUrl:{		//设置水印图片
				type:String,
				default:''
			},
			opacity:{		//设置透明度
				type:[Number,String],		
				default:0.6
			},
			num:{			//设置水印数量
				type:Number,
				default:6
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
.watermark{
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left: 0;
	bottom: 0;
	right: 0;
	pointer-events: none;
	z-index: 9999999;
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	.watermark-text{
		width: 375upx;
		height: 375upx;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: rotate(-36deg);
		color: #d4d4d4;
		font-size: 32upx;
		white-space: nowrap;
	}
	.watermark-img{
		width: 375upx;
		height: 375upx;
		z-index: 1;
	}
}
</style>

3. 在使用的文件中

<template style="height: 100%;  ">
	<view>
		<wm-watermark text="秦青电子版权所有"></wm-watermark>
		......以下为界面显示
	</view>

</template>
<script>
	import wmWatermark from '../../components/wm-watermark.vue';
	export default {
		components: {
			wmWatermark
		},
		data（）{
		.....
		}
}
</script>

4. 效果图
   

注：感谢 代码提供大佬