在前端开发中，我们经常会遇到需要对页面进行水印处理的情况，例如需要对某个文件进行保密处理，需要在文件内容上加上水印。而 page-watermark 是一个简单易用的 npm 包，可以帮助我们在页面上添加水印。
安装 page-watermark
使用 npm 进行安装：
npm install page-watermark
安装完成后，我们就可以在项目中使用 page-watermark。
使用 page-watermark
首先，我们需要引入 page-watermark：
import Watermark from 'page-watermark';
基本使用
page-watermark 提供了一个默认配置，可以直接使用：
Watermark.setWatermark({
containerSelector: 'body',
});这将在 body 元素上添加一个水印。
自定义水印内容
我们可以通过 text 选项来设置水印的内容：
Watermark.setWatermark({
containerSelector: 'body',
text: 'My Watermark',
});自定义水印样式
我们可以通过 CSS 样式来自定义水印的样式：
-- -------------------- ---- -------
------------------------
------------------ -------
----- --- -----------
------ -
------ -------
--------- -------
-------- ----
------- ----
------- ----
--
---动态更新水印
如果我们想要在页面上动态更新水印，可以使用 updateWatermark 方法：
Watermark.updateWatermark({
text: 'New Watermark Text'
})删除水印
如果我们想要删除页面上的水印，可以使用 clearWatermark 方法：
Watermark.clearWatermark();
示例代码
以下是一个使用 page-watermark 的示例代码：
-- -------------------- ---- -------
------ --------- ---- -----------------
------------------------
------------------ -------
----- --- -----------
------ -
------ -------
--------- -------
-------- ----
------- ----
------- ----
--
---
------------- -- -
---------------------------
----- ---- --------- -----
---
-- ------以上示例代码将在页面上添加一个水印，并在 5 秒后将水印内容更新为 "New Watermark Text"。
总结
page-watermark 是一个简单易用的 npm 包，可以帮助我们在页面上添加水印，可以自定义水印的内容和样式，同时也支持动态更新和删除水印，非常适合在前端开发中使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0d81e8991b448d8b40