# @zu1662/watermark-vue

> 水印Vue3组件封装

Latest version **1.1.2** (published 2022-03-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @zu1662/watermark-vue
pnpm add @zu1662/watermark-vue
yarn add @zu1662/watermark-vue
bun add @zu1662/watermark-vue
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.2 |
| Published | 2022-03-09 |
| First published | 2022-03-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 13 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zu1662 |
| Maintainers | huazite |
| Keywords | watermark, vue |

## Links

- npm: https://www.npmjs.com/package/@zu1662/watermark-vue
- npm.io page: https://npm.io/package/@zu1662/watermark-vue

## Dependencies (1)

- [@zu1662/watermark](https://npm.io/package/@zu1662/watermark.md) ^1.1.2

## Recent versions

- 1.1.2 (latest) — 2022-03-09
- 1.1.1 — 2022-03-09
- 1.1.0 — 2022-03-09
- 1.0.2 — 2022-03-09
- 1.0.1 — 2022-03-09
- 1.0.0 — 2022-03-09

## README

# `@zu1662/watermark-vue`

> 基于 @zu1662/watermark 的组件封装

## 使用

```shell
# npm
npm install @zu1662/watermark-vue

# yarn
yarn add @zu1662/watermark-vue
```

> 全局注册组件

```vue
// main ts
import WaterMarkInstall from '@zu1662/watermark-vue';
const app = Vue.createApp()
app.use(WaterMarkInstall)

// 使用
<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>
```

> 组件引用

```vue
<template>
  <WaterMark ref="aaa" class="date-picker" text="测试人员" :visible="visible">
    <someCom />
  </WaterMark>
</template>
<script>
import { WaterMark } from '@zu1662/watermark-vue';
export default defineComponent({
  components: {
    WaterMark,
  }
})
</script>
```

## API

### 基本参数

|参数|说明|类型|默认值|
|---|---|---|---|
|text|水印文本, 为数组时表示多行水印|`string` \| `string[]`|-|
|visible|水印是否显示|`boolean`|`true`|
|options|高级参数|`WatermarkOptions`|`null`|

### 高级参数

|参数|说明|类型|默认值|
|---|---|---|---|
|monitor|是否开启保护模式|`boolean`|`true`|
|mode|展示模式，interval表示错行展示|`string`|`interval`|
|gapX|水印之间的水平间距|`number`|`100`|
|gapY|水印之间的垂直间距|`number`|`100`|
|offsetLeft|水印在 canvas 画布上绘制的水平偏移量|`number`|`0`|
|offsetTop|水印在 canvas 画布上绘制的垂直偏移量|`number`|`0`|
|width|单个水印宽度|`number`|`120`|
|height|单个水印高度|`number`|`64`|
|useClientHeight|是否使用元素或者父元素的ClientHeight|`boolean`|`false`|
|image|图片源，建议导出 2 倍或 3 倍图，优先使用图片渲染水印|`string`|-|
|zIndex|水印层级|`number`|`9999`|
|width|单个水印宽度|`number`|`120`|
|height|单个水印高度|`number`|`64`|
|opacity|水印透明度|`number`|`0.15`|
|rotate|旋转的角度|`number`|`-22`|
|fontSize|设置字体大小|`number`|`16`|
|fontWeight|设置字体粗细|`number` \| `string` |`normal`|
|fontStyle|规定字体样式|`string`|`normal`|
|fontVariant|规定字体变体|`string`|`normal`|
|fontColor|设置字体颜色|`string`|`#000`|
|fontFamily|设置水印文字的字体|`string`|`sans-serif`|

---
_Source: https://npm.io/package/@zu1662/watermark-vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._