# simple-water

**Repository Path**: tang-lang/simple-water

## Basic Information

- **Project Name**: simple-water
- **Description**: 一款用于生成水印的JS插件，使用简单，支持TS
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-21
- **Last Updated**: 2024-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# simple-water

一款用于生成水印的JS插件，使用简单，支持TS

## 核心代码

- 设置水印

  ```js
  // 方式1：水印'admin' 将设置到整个html标签上
  setWaterMark('admin')
  
  // 方式2：水印'admin' 将设置到id为app的盒子上
  setWaterMark('admin', '#app')
  
  // 方式3：水印'admin' 将设置到div变量所指向的DOM盒子上
  const div = document.querySelector('#app')
  setWaterMark('admin', div)
  ```

- 移除水印

  ```js
  // 移除之前添加的水印
  removeWaterMark()
  ```

## 使用步骤

1. 安装

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

2. 导入

   ```js
   import { setWaterMark  } from "simple-water";
   ```

3. 使用（以vue3项目为例）

   ```vue
   <script setup lang="ts">
   import { onMounted } from "vue";
   import { setWaterMark  } from "simple-water";
   
   onMounted(()=>{
     setWaterMark('admin')
   })
   </script>
   ```

   呈现效果

   ![DEMO](https://gitee.com/tang-lang/simple-water/raw/dev/demo.png)

## 配置对象

支持传递配置项进行配置`setWaterMark(水印文本, DOM或选择器, 配置对象)`

核心代码如下：

```ts
// 完整的配置对象，其中每个属性都是非必须的
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