LimeWatermark 水印

• 给页面或某个区域加上水印。
• 支持uniapp/uniappx

安装

在 导入即可，首次导入可能需要重新编译

代码演示

基础使用

<l-watermark content="LimeUi">
	<view class="content">
		<text>这是很重要的内容</text>
		<button @click="onClick">点击</button>
	</view>
</l-watermark>

多行

<l-watermark :content="['LimeUi', '人生得意']"  :baseSize="1">
	<view class="content">
		<text>这是很重要的内容</text>
		<button @click="onClick">点击</button>
	</view>
</l-watermark>

图片

• 注意:uvue app不支持
• 使用width和height控制图片的大小
• 注意，网络图片在H5和NVUE需要解决跨域问题，在小程序需要去公众平台配置download域名

<l-watermark image="https://img10.360buyimg.com/img/jfs/t1/182127/16/37474/11761/64659c31F0cd84976/21f25b952f03a49a.jpg" :width="60" :height="60">
	<view class="content">
		<text>这是很重要的内容</text>
		<button @click="onClick">点击</button>
	</view>
</l-watermark>

查看示例

• 导入后直接使用这个标签查看演示效果

// 代码位于 uni_modules/lime-watermark/compoents/lime-watermark
<lime-watermark />

插件标签

• 默认 l-watermark 为 component
• 默认 lime-watermark 为 demo

API

Props

参数	说明	类型	默认值
zIndex	追加的水印元素的 z-index	number	9
content	水印文字内容	string，string[]	-
width	水印的宽度，content 的默认值为自身的宽度(px)	number	120
height	水印的高度，content 的默认值为自身的高度(px)	number	64
image	图片源，建议导出 2 倍或 3 倍图，优先级高 (支持 base64 格式)	string	-
rotate	水印绘制时，旋转的角度，单位	number	-22
gap	水印之间的间距	[number, number]	[30,30]
offset	水印距离容器左上角的偏移量，默认为 gap/2	number, number]	-
font	文字样式 {color, fontSize, fontFamily}	Font	-
fontGap	多行文字的间隔	number	3
fullScreen	是否为全屏水印	boolean	false
baseSize	图片每块内容重复次数	number	2

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码