wiz-watermark

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	string	grid	水印样式， grid, position, diy
watermarkClass	string	-	水印容器class类名
rotate	number	-30	水印旋转角度
content	string,array	水印文字	水印内容,文字或[{title:'水印内容'}]
size	number	1	水印数量,如content设置为array类型,此参数无效
contentStyle	object	-	css样式配置,如{color:'red',textAlign:'left'},优先使用驼峰命名

mode = 'grid'

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

mode = 'position'

属性	类型	默认值	说明
fixed	boolean	false	是否采用定位模式
position	string	m-center	仅用于非定位模式 t ,m ,b 垂直-上中下, left center right 水平-上中下

mode= 'diy'

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

import WizWatermark from 'wiz-watermark'

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