simple-water

一款用于生成水印的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()

使用步骤

1. 安装

   npm i simple-water
   或
   yarn add simple-water
   或
   pnpm add simple-water

2. 导入

   import { setWaterMark  } from "simple-water";

3. 使用（以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