网站页面水印效果的实现（上）：页面水印的添加

水印，对于互联网来说，已经成为一项非常重要的用来保护知识产权的重要手段。其中，又以像图片水印、文档水印之类的技术，应用的最为广泛。通常情况下，图片或者文档的水印，都是由后端来处理的。但有些情况下，后端处理起来就非常困难了。比如在web项目中，经常能够看到类似于全站页面都被添加了水印的效果：

不管你浏览到web服务的哪个页面，又或者是显示的什么图片或文本，水印签名都在。从知识产权保护的角度来看，是非常有必要的，可防止页面信息被盗取、转载，保护知识产权人的利益。

这种效果其实实现起来也不难，对于react来说，如果使用ant design框架的话，会自带watermark水印组件，直接引用即可。但如果使用vue框架，那就比较悲催，目前在vue框架下还没有能够支持像在react下使用ant design中的watermark组件一样便捷的组件产品。所以如果想要实现同样的效果，只能自己造一个组件出来，然后实现。

其实页面水印原理很简单，就是在要展示的页面上方再添加一个遮罩层，在遮罩层上添加水印签名信息，然后将遮罩层背景处理成透明效果，保留签名信息样式不变即可。即便react中使用的ant design框架的watermark水印组件，起实现原理也是一样。

原理很简单，都能想得到，但实际做起来，却还需要考虑很多的问题。比如如何创建水印遮罩层、如何将水印信息灵活方便的应用到指定区域，再比如如何防止前端操作对水印信息的删除等操作，这些都需要考虑在内。

接下来就分两期，给大家介绍一下，一个简单的文字水印组件的构建过程，分别是水印信息的创建/添加和水印防篡改（网站页面水印效果的实现（下）：页面水印防篡改）。

这一期，先来介绍水印信息的添加，也就是如何创建一个水印组件，能够像ant design框架的watermark组件一样，可以灵活方便的应用到指定区域。

使用环境：vue3 + element plus

首先创建一个自定义watermark组件：

<template>
  <div class="watermark-container" ref="yaken">
    <slot></slot>
  </div>
</template>

<script setup>
import CustomWaterMark from '@/util/customWaterMark.js'
import {definePr