页面水印

1. 功能

• 创建水印和暗水印
• 支持文本、多行文本、图片和富文本水印
• 支持监听 DOM 改动行为，防止水印被手动删除
• 支持 TypeScript
• 提供丰富的配置选项

设置水印

2. 开始

2.1. 安装

可以通过 npm 或 yarn 进行安装：

使用 npm：

$ npm install watermark-js-plus

使用 yarn：

$ yarn add watermark-js-plus

2.2. 引入水印插件

在你的项目中引入水印插件：

TypeScript:

import { Watermark } from "watermark-js-plus";

2.3. 实例化

创建一个 Watermark 实例并进行相应的配置：

TypeScript:

const watermark = new Watermark({
  content: "hello my watermark",
  width: 200,
  height: 200,
  onSuccess: () => {
    // 成功添加水印后的回调函数
  },
});

2.4. 添加水印

调用 create()方法向页面添加水印：

TypeScript:

watermark.create();

3. 代码展示

<script setup>
import { onMounted } from "vue";
import { Watermark } from "watermark-js-plus";

onMounted(async () => {
  const watermark = new Watermark({
    parent: ".content-container",
    content: "🇨🇳子卿全栈系列 💯",
    width: 300,
    height: 200,
    rotate: 22,
    layout: "grid",
    fontSize: "18px",
    fontColor: "rgba(125, 125, 125, 0.4)",
    onSuccess: () => {
      // success callback
    },
  });

  watermark.create(); // 添加水印

  // watermark.destroy() // 删除水印
});
</script>

更多详细的配置选项和使用说明，请参考文档链接。