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.在使用的文件中