Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Uniapp builds its own component library (6) global watermark

preface

This article will lead the readers to use uniapp encapsulate some commonly used components, convenient development in the future when repeated use, of course, the paper packaging components may not fit all application scenario, but I hope the reader can follow my train of thought, and then can be modified on the basis of optimizing suitable for oneself, I am a front side chicken, hope leaders can be glad to, It is also the improvement of my technical level

Global watermark

demand

In the process of developing for customers, we often encounter some information with high confidentiality. At this time, we need to add global watermark to facilitate the traceability after being captured, so we will encapsulate the watermark component

Results show

Application effect

Application code
<view>
	<Ywatermark :info="' Here is the watermark content '"></Ywatermark>
</view>
Copy the code

Implementation approach

First, a transparent mask is required to cover the page, and then the watermark information is displayed in a loop. After the display is completed, the mask is rotated and tilted. Then, in order to ensure that the watermark does not affect the normal use of the lower page functions, use pointer-events: None. Property allows events to penetrate below

Complete implementation code

<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: 'Global watermark'}},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>

Copy the code