uniapp 打造自用组件库 (六) 全局水印

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

uniapp 打造自用组件库 (六) 全局水印

前言

本文将带领读者使用uniapp封装一些常用组件，方便日后开发时重复使用，当然文中封装的组件不可能适配所有应用场景，但是我希望读者可以跟着我的思路实现出来，然后可以在此基础上优化改进为自己合适的，本人一个前端小菜鸡，希望大佬们可以不吝赐教，也是对我的技术水平的提升

全局水印

需求

在给客户开发过程中，经常会遇到一些保密性较强的信息展示，这时候就需要增加全局水印，便于被截图后的溯源，于是便封装水印组件

效果展示

应用效果

应用代码

<view>
	<Ywatermark :info="'这里是水印内容'"></Ywatermark>
</view>

实现思路

首先需要一个透明蒙版盖住页面，然后将水印信息循环展示出来，展示完成后将蒙版旋转倾斜，然后为了让水印不影响下层页面功能的正常使用，需要使用pointer-events: none;属性让事件穿透到下面去

完整实现代码

<template>
	<view class="make">
		<view class="list">
			<view class="item" v-for="i in 500">
				<text>{{info}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "watermark",
		props: {
			info: {
				type: String,
				default: '全局水印'
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.make {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 9999;
		background: rgba(0, 0, 0, 0);
		pointer-events: none;

		.list {
			width: 500%;
			height: 400%;
			position: absolute;
			top: -50%;
			left: -50%;
			transform: rotate(-45deg);
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			pointer-events: none;

			.item {
				font-size: 28px;
				color: rgba(220, 220, 220, 0.3);
				font-weight: bold;
				padding: 30rpx;
				pointer-events: none;
			}
		}
	}
</style>