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 规范。
🚀 快速上手
由于使用了 easycom 机制，您无需在页面中手动 import，直接在 <template> 中使用即可。
基础用法
最简单的使用方式，仅需传入文本：
<template>
<view>
<muzi-watermark text="张三 13800138000" />
<view class="content">
这里是页面正常内容…
</view>
</view>
</template>
高级用法（自定义样式）
您可以自定义颜色、透明度、旋转角度等：
<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 布局自动平铺适配 |
⚠️ 注意事项
📝 更新日志
v1.0.0
- 初始化发布插件。
- 实现 View + CSS 方案，兼容多端。
- 支持暗黑模式适配。
下载地址：https://ext.dcloud.net.cn/plugin?id=26789
