# wiz-watermark

> wizlong react components

Latest version **1.0.0** (published 2023-03-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install wiz-watermark
pnpm add wiz-watermark
yarn add wiz-watermark
bun add wiz-watermark
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-03-08 |
| First published | 2023-03-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 56.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | mll9527 |
| Keywords | wiz, react, components |

## Links

- npm: https://www.npmjs.com/package/wiz-watermark
- Repository: https://gitlab.wizlong.com/sgm2.0/frontend/wiz-watermark
- npm.io page: https://npm.io/package/wiz-watermark

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.0 (latest) — 2023-03-08

## README

## wiz-watermark

wiz-watermark 是一个基于react实现的文字水印插件,可生成多行多列、指定位置的文字水印。也可以发挥你的想象力在容器中编写你想要的水印内容。适配PC与移动端。


## Demo

![avatar](https://sgm-lms-plus.oss-cn-shanghai.aliyuncs.com/temp/picture/20221206174547367f2549484546ada4.png)

## 安装

 - npm install git+https://gitlab.wizlong.com/sgm2.0/frontend/wiz-watermark


## 基本使用

  ```js

import WizWatermark from 'wiz-watermark'

const App = () => {

		// 配置项目
	let wizWatermarkConfig = {

		mode:'grid', // 采用栅格模式,
		size: 6 , // 总计需要渲染6个水印
		col:6, // 每个水印占用栅格布局 6/12
		content:'wiz-watermark', // 水印文字内容,
		rotate:-30, // 水印文字旋转角度
		contentStyle:{  // 配置你需要的css样式
		   color:'red'
		}
	}

	return (
		<div>
			<WizWatermark {...wizWatermarkConfig} />
		</div>
	)
}

  ```


## 参数配置

   <table border="1">
			<tr>
				<th>属性</th>
				<th>类型</th>
				<th>默认值</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>mode</td>
				<td>string</td>
				<td>grid</td>
				<td>水印样式， grid, position, diy </td>
			</tr>
			<tr>
				<td>watermarkClass</td>
				<td>string</td>
				<td>-</td>
				<td>水印容器class类名</td>
			</tr>
			<tr>
				<td>rotate</td>
				<td>number</td>
				<td>-30</td>
				<td>水印旋转角度</td>
			</tr>
			<tr>
				<td>content</td>
				<td>string,array</td>
				<td>水印文字</td>
				<td>水印内容,文字或[{title:'水印内容'}]</td>
			</tr>
			<tr>
				<td>size</td>
				<td>number</td>
				<td>1</td>
				<td>水印数量,如content设置为array类型,此参数无效</td>
			</tr>
            <tr>
				<td>contentStyle</td>
				<td>object</td>
				<td>-</td>
				<td>css样式配置,如{color:'red',textAlign:'left'},优先使用驼峰命名</td>
			</tr>
   </table>


#### mode = 'grid'

   <table border="1">
			<tr>
				<th>属性</th>
				<th>类型</th>
				<th>默认值</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>col</td>
				<td>number</td>
				<td>12</td>
				<td>栅格布局,对应宽度比例, 1~12</td>
			</tr>
			<tr>
				<td>rowJustify</td>
				<td>string</td>
				<td>center</td>
				<td>flex对应的主轴排列方式,end、center、around、between, start。(水平方向)</td>
			</tr>
			<tr>
				<td>rowAlign</td>
				<td>string</td>
				<td>center</td>
				<td>flex对应的侧轴排列方式, end、center、start, between。(垂直方向)</td>
			</tr>
			<tr>
				<td>rowWarp</td>
				<td>boolean</td>
				<td>true</td>
				<td>是否为多列形式水印</td>
			</tr>
			<tr>
				<td>colWarp</td>
				<td>boolean</td>
				<td>true</td>
				<td>水印内容是否可以换行</td>
			</tr>
   </table>   


#### mode = 'position' 

   <table border="1">
			<tr>
				<th>属性</th>
				<th>类型</th>
				<th>默认值</th>
				<th>说明</th>
			</tr>
			<tr>
				<td>fixed</td>
				<td>boolean</td>
				<td>false</td>
				<td>是否采用定位模式</td>
			</tr>
			<tr>
				<td>position</td>
				<td>string</td>
				<td>m-center</td>
				<td>仅用于非定位模式  t ,m ,b 垂直-上中下, left center right 水平-上中下  </td>
			</tr>
	</table>


#### mode= 'diy'

自定义内容,仅挂载一个透明的dom盒子,水印样式可在容器内部中使用

```js

import WizWatermark from 'wiz-watermark'

<WizWatermark mode='diy'>
    <!-- 水印内容自己编写 -->
</WizWatermark>

```

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