更新记录
0.1.0(2024-06-17)
下载此版本
0.0.9(2024-04-11)
下载此版本
0.0.8(2024-04-10)
下载此版本
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
HBuilderX 4.04 app-vue app-nvue app-uvue |
× |
√ |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
√ |
√ |
√ |
√ |
√ |
× |
× |
× |
√ |
lime-watermark 水印
- 给页面或某个区域加上水印。
- 支持uniapp/uniappx(web,ios,安卓)
使用
<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
不支持
- 使用
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 |
打赏
如果你觉得本插件,解决了你的问题,赠人玫瑰,手留余香。