UniApp全端水印组件muzi-watermark

muzi-watermark 全端通用水印组件

muzi-watermark 是一款专为 UniApp 打造的高性能、全端兼容的全局水印插件。基于 Vue2 Options API 开发，摒弃复杂的 Canvas 方案，采用高性能 DOM + CSS 变换方案，确保在安卓、iOS、H5 及各类小程序中表现一致。

下载地址：https://ext.dcloud.net.cn/plugin?id=26789

📸 核心特性

全端兼容：完美支持 App (Android 10+ / iOS 12+)、H5、微信小程序及其他主流小程序。
无感交互 ：采用 pointer-events: none 技术，水印层级虽高但完全不阻挡下方内容点击与交互。
自适应布局：智能计算屏幕尺寸，无论是手机还是平板（Pad），水印自动铺满，旋转无死角。
暗黑适配：内置暗黑模式（Dark Mode）逻辑，深色背景下自动调整透明度，防止刺眼。
开箱即用 ：符合 uni_modules 规范，无需手动引入，安装即可在页面中使用。
高性能：非 Canvas 绘制，无内存泄漏风险，对长列表页面滚动无影响。

📦 安装方式

本组件符合 uni_modules 规范。

下载插件包，解压至项目根目录的 uni_modules 文件夹下。
目录结构应为：项目根目录/uni_modules/muzi-watermark/。

🚀 快速上手

由于使用了 easycom 机制，您无需在页面中手动 import，直接在 <template> 中使用即可。

基础用法

最简单的使用方式，仅需传入文本：

html 复制代码

<template>
  <view>
    <muzi-watermark text="张三 13800138000" />
    
    <view class="content">
      这里是页面正常内容...
    </view>
  </view>
</template>

高级用法（自定义样式）

您可以自定义颜色、透明度、旋转角度等：

html 复制代码

<template>
  <view>
    <muzi-watermark 
      text="内部绝密资料" 
      color="#EF3912" 
      :opacity="0.1"
      :rotate="-45" 
      :z-index="10000"
    />
    
    </view>
</template>

⚙️ API 文档

Props 属性

参数	说明	类型	默认值	可选值
text	水印显示的文本内容	String	`MuZi Watermark`	-
color	水印文字颜色	String	`#999999`	任何 Hex/Rgb 颜色
fontSize	字体大小 (单位 rpx)	Number/String	`28`	-
opacity	水印透明度	Number	`0.15`	0 ~ 1
rotate	旋转角度 (单位 deg)	Number	`-30`	-
zIndex	层级 (z-index)	Number	`9999`	建议设置高数值
gap	水印之间的估算间距	Number	`100`	-

Events 事件

注意：组件默认设置了 pointer-events: none 以实现点击穿透。如需捕获点击事件，需手动修改组件源码 CSS 去除该属性，但不推荐这样做，因为会阻挡页面操作。

事件名	说明	回调参数
@click	点击水印时触发 (需开启交互)	`{ text: '当前水印内容', timestamp: '时间戳' }`

📱 平台兼容性

平台	兼容性	说明
H5 (浏览器)	✅	支持所有主流移动端浏览器
Android App	✅	兼容 Android 10.0+
iOS App	✅	兼容 iOS 12.0+
微信小程序	✅	完美支持
支付宝小程序	✅	理论支持，未完全测试
宽屏设备 (Pad)	✅	Flex 布局自动平铺适配

⚠️ 注意事项

层级问题 ：默认 z-index 为 9999。如果页面中有 u-view 的模态框（Toast/Modal）被遮挡，请适当调整本组件的 zIndex 或调整 UI 库的层级配置。
Nvue 支持 ：目前版本主要针对 Vue 页面优化。nvue 页面由于渲染机制不同（weex），本插件可能无法直接在 nvue 中全屏生效，需自行调整布局方式。
背景色 ：若页面背景色为纯白，默认的灰色水印效果最佳；若页面背景复杂，建议适当调整 opacity 或 color。

📝 更新日志

v1.0.0

初始化发布插件。
实现 View + CSS 方案，兼容多端。
支持暗黑模式适配。

下载地址：https://ext.dcloud.net.cn/plugin?id=26789