页面水印
1. 功能
- 创建水印和暗水印
- 支持文本、多行文本、图片和富文本水印
- 支持监听 DOM 改动行为,防止水印被手动删除
- 支持 TypeScript
- 提供丰富的配置选项
2. 开始
2.1. 安装
可以通过 npm 或 yarn 进行安装:
使用 npm:
bash
$ npm install watermark-js-plus
使用 yarn:
bash
$ yarn add watermark-js-plus
2.2. 引入水印插件
在你的项目中引入水印插件:
TypeScript:
typescript
import { Watermark } from "watermark-js-plus";
2.3. 实例化
创建一个 Watermark 实例并进行相应的配置:
TypeScript:
typescript
const watermark = new Watermark({
content: "hello my watermark",
width: 200,
height: 200,
onSuccess: () => {
// 成功添加水印后的回调函数
},
});
2.4. 添加水印
调用 create()方法向页面添加水印:
TypeScript:
typescript
watermark.create();
3. 代码展示
vue
<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>
更多详细的配置选项和使用说明,请参考文档链接。