更新记录
1.0.0(2026-07-13)
下载此版本
初始版本
平台兼容性
uni-app(4.0)
| Vue2 |
Vue2插件版本 |
Vue3 |
Vue3插件版本 |
Chrome |
Chrome插件版本 |
Safari |
Safari插件版本 |
app-vue |
app-nvue |
Android |
Android插件版本 |
iOS |
鸿蒙 |
| √ |
1.0.0 |
√ |
1.0.0 |
√ |
1.0.0 |
√ |
1.0.0 |
- |
- |
√ |
1.0.0 |
- |
- |
| 微信小程序 |
微信小程序插件版本 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
小红书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
1.0.0 |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
zv-watermark
容器背景平铺水印,支持文字与图片,可自定义透明度、角度、密度。
用法
<!-- 文字水印 -->
<zv-watermark content="zackboys" height="400" :opacity="0.5" :rotate="-22">
<button>这个是按钮</button>
</zv-watermark>
<!-- 图片水印(本地/网络) -->
<zv-watermark
type="image"
src="https://zackboys.cn/logo.png"
:gap="[160, 100]"
:rotate="-30"
>
<view>页面内容</view>
</zv-watermark>
<!-- 自定义宽高与文字样式 -->
<zv-watermark
content="zackboys"
width="100%"
height="600"
:font-size="32"
color="#cccccc"
font-weight="bold"
:gap="140"
/>
参数
| 参数 |
说明 |
默认 |
| content / text |
文字水印 |
Watermark |
| image / src |
图片地址(本地/网络) |
- |
| type |
auto / text / image |
auto |
| width |
容器宽度 |
100% |
| height |
容器高度 |
自适应 |
| opacity |
透明度 0~1 |
0.15 |
| rotate |
旋转角度 |
-22 |
| gap |
间距/密度,数字或 [x,y] |
120 |
| fontSize / color / fontWeight / fontFamily |
文字样式 |
- |
| imageWidth / imageHeight |
图片水印尺寸 |
120 / 60 |
| customStyle |
容器额外样式 |
- |
| zIndex |
水印层级 |
1 |
说明
- 默认
slot 内容显示在水印之上
gap 越小密度越大
- 图片水印使用
image 组件,支持本地路径与网络 URL
实际效果请查看小程序或app
| 小程序示例 |
app示例 |
 |
 |