代码拉取完成，页面将自动刷新
一款用于生成水印的JS插件，使用简单，支持TS
设置水印
// 方式1：水印'admin' 将设置到整个html标签上
setWaterMark('admin')
// 方式2：水印'admin' 将设置到id为app的盒子上
setWaterMark('admin', '#app')
// 方式3：水印'admin' 将设置到div变量所指向的DOM盒子上
const div = document.querySelector('#app')
setWaterMark('admin', div)
移除水印
// 移除之前添加的水印
removeWaterMark()
安装
npm i simple-water
或
yarn add simple-water
或
pnpm add simple-water
导入
import { setWaterMark } from "simple-water";
使用（以vue3项目为例）
<script setup lang="ts">
import { onMounted } from "vue";
import { setWaterMark } from "simple-water";
onMounted(()=>{
setWaterMark('admin')
})
</script>
呈现效果
支持传递配置项进行配置setWaterMark(水印文本, DOM或选择器, 配置对象)
核心代码如下：
// 完整的配置对象，其中每个属性都是非必须的
const option = {
blockWdith: 150, // 每块宽度
blockHeight: 80, // 每块高度
rotate: 20, // 文字倾斜角度
font: "18px Vedana", // 水印文字字体
fillStyle: '#666666', // 水印文字颜色
zIndex: 10000, // 水印层级
opacity: 0.08 // 水印透明度
}
// 方式1：水印'admin' 将设置到整个html标签上
setWaterMark('admin', null, option)
// 方式2：水印'admin' 将设置到id为app的盒子上
setWaterMark('admin', '#app', option)
// 方式3：水印'admin' 将设置到div变量所指向的DOM盒子上
const div = document.querySelector('#app')
setWaterMark('admin', div, option)
其中option配置项可以写到一个.json的配置文件中再导入使用
gitee上的仓库地址：https://gitee.com/tang-lang/simple-water
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
