Add watermark to vue page (can be used for H5, APP)

background

A small function has been implemented recently, which is to add a background watermark to the page. The implementation idea is to define a component whose width and height fill the screen, and then use absolute positioning and control the level to make the watermark appear at the front of the page.

accomplish

The code is relatively simple, I believe people with a little bit of Vue foundation can understand it

Create a new vue component

watermark.vue

<template>
    <view class="make">
        <view class="list">
        	<!--这里循环生成水印文字-->
            <view class="item" v-for="i in 300">
                <text>{
    
    {
    
     info }}</text>
            </view>
        </view>
    </view>
</template>

<script setup>
	const props = defineProps({
    
    
	    info: {
    
    
	        type: String,
	        default: '默认水印'
	    }
	})
</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: 50rpx;
                color: rgba(220, 220, 220, 0.3);
                font-weight: bold;
                padding: 30rpx;
                pointer-events: none;//这句很关键，让事件穿透
            }
        }
    }
</style>

use

Create any page, and then import the watermark.vue component in the previous step

<template>
	<view>
		<button>test</button>
		<view>水印测试</view>
		<Ywatermark info="吗咿呀嘿"></Ywatermark>
	</view>
</template>
<script>
	import Ywatermark from '../watermark.vue'
	//这里省略其他无关代码
	...
</script>

Effect

H5 page running effect

Tail

The effect is relatively simple today, and the effect is best on the H5 page. There are some problems with the highest level of native controls on the APP, which will be blocked. You can use nvue to try this problem. In theory, Vue projects on the PC side can also be used.
I hope today's article can help you. If you like my article, please give me likes, comments, and attention. Thank you!