wiz-watermark v1.0.0

wiz-watermark

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

Demo

安装

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

基本使用

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>
	)
}

参数配置

mode = 'grid'

mode = 'position'

mode= 'diy'

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

import WizWatermark from 'wiz-watermark'

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